asked on

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.

Marco Gasi

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

Gary

$(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/

Robert Granlund

ASKER

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

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

ASKER

It is really strange. The div opens part ways and then closes. Something Gets in the way. How would I de-bug that?

Gary

Without seeing your code I don't know. Try and replicate in the fiddle what you actually have

Robert Granlund

ASKER

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

Robert Granlund

ASKER

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

Robert Granlund

ASKER

Actually, I figured it out! Thanks for your help!