?
Solved

JQuery OnClick

Posted on 2014-03-18
9
Medium Priority
?
357 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
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.

 
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

Independent Software Vendors: 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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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

801 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