• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 360
  • Last Modified:

JQuery OnClick

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
rgranlund
Asked:
rgranlund
  • 5
  • 3
1 Solution
 
Marco GasiFreelancerCommented:
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
 
GaryCommented:
$(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
 
rgranlundAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GaryCommented:
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
 
rgranlundAuthor Commented:
It is really strange.  The div opens part ways and then closes.  Something Gets in the way.  How would I de-bug that?
0
 
GaryCommented:
Without seeing your code I don't know. Try and replicate in the fiddle what you actually have
0
 
rgranlundAuthor Commented:
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
 
rgranlundAuthor Commented:
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
 
rgranlundAuthor Commented:
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!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now