Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JQuery OnClick

Posted on 2014-03-18
9
Medium Priority
?
358 Views
Last Modified: 2014-03-19
I have a piece of JQuery that opens a div when you click a button.  How do I get it to close the same dive when you click the button again, and also have a different message on the div?

$(document).ready(function() {
	$('#submit1').click(function() {
		if ($(this).attr("value") == "custom 1 yes") {
			$("#custom-hidden").show('slow');
		}


<button id="submit1" name="custom_yes" value="custom '.$count.' yes" />CUSTOMIZE NOW</button>

Open in new window


So, when I click the button again it says "Finish Customizing" and when I click it, it shuts the div.
0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 39938198
This should do the trick:

	$('#submit1').click(function() {
		if ($(this).attr("value") == "custom 1 yes") {
			$("#custom-hidden").show('slow');
		}else{
			$("#custom-hidden").hide('slow');
			$(this).attr("value", "Finish Customizing");
		}	
	});
	

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39938245
$(document).ready(function() {
	$('#submit1').click(function() {
		var txt = ($(this).val()=="custom 1 yes" ? 'Finish Customizing' : 'custom 1 yes');
		if ($(this).attr("value") == "custom 1 yes") {
			$(this).attr("value") = txt
			$("#custom-hidden").toggle('slow');
		}

Open in new window

For complete variables and options.
http://api.jquery.com/toggle/

There's also slideToggle
https://api.jquery.com/slideToggle/
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39938279
When I do this, it opens real quick and shuts.  It does not stay open:

$(document).ready(function() {
	$('#submit1').click(function() {
		if ($(this).attr("value") == "custom 1 yes") {
			$("#custom-hidden").show('slow');
		}else{
			$("#custom-hidden").hide('slow');
			$(this).attr("value", "Finish Customizing");
		}


<button id="submit1" name="custom_yes" value="custom '.$count.' yes" />CUSTOMIZE NOW</button> 

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39938301
http://jsfiddle.net/GaryC123/JF6U2/

	$('#submit1').click(function() {
		if ($(this).val() == "custom 1 yes") {
            $(this).text("Finish Customizing")
			$("#custom-hidden").toggle('slow');
		}
    })

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 39938352
It is really strange.  The div opens part ways and then closes.  Something Gets in the way.  How would I de-bug that?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39938361
Without seeing your code I don't know. Try and replicate in the fiddle what you actually have
0
 
LVL 7

Author Comment

by:rgranlund
ID: 39940345
OK, I have it working sort of:  The following will open the div but it will not change the value on the button.

So what I need is the following.
1. I want to show the NAME of the button and not the value
2. When I click, the div opens. (This works)
3. After I click it, the button should say "Finished Customizing"
4. When I click the button again, the div closes.

	$('input[type="button"]').click(function() {
		if ($(this).attr("name") == "CUSTOMIZE NOW") {
			$("#custom-hidden").show('slow');
		}else{
			$("#custom-hidden").hide('slow');
			$(this).attr("value", "Finish Customizing");
		}
  });

<input type="button" name="CUSTOMIZE NOW" value="custom  yes" />

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 39940443
OK, I have the toggel working 100% but I want to change what the button says:

$('input[type="button"]').click(function() {
		if ($(this).val() == "custom 1 yes") {
            $(this).text("Finish Customizing")
			$("#custom-hidden").toggle('slow');
		}
  });

<input type="button" name="CUSTOMIZENOW" value="custom '.$count.' yes" />

Open in new window

0
 
LVL 7

Author Comment

by:rgranlund
ID: 39940450
Actually, I figured it out!  Thanks for your help!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question