Solved

JQuery OnClick

Posted on 2014-03-18
9
354 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 58

Accepted Solution

by:
Gary earned 500 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses four methods for overlaying images in a container on a web page
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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