When I click on jquery button it hides the text but when I click on it again nothing happens. Why?

Question

0.00/5 (No votes)

See more:

I have a website that uses jQuery to Hide and Show with one button. I got it to hide my text and the button changes it's name but I can't get it to Show the text again and the button stays the same. Did I miss something in my code?

Here is my HTML code:

HTML

<!DOCTYPE html>

<html lang="en">

<head>
	<title>Path of Light Yoga Studio :: Classes</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="jquery/yoga.js" type="text/javascript"></script>
</head>
<body>
	<div id="wrapper">
	<header><h1>Path of Light Yoga Studio</h1></header>
		<p></p>
			<a href="index.html">Home</a>  
			<a href="Classes.html">Classes</a> 
			<a href="Schedule.html">Schedule</a> 
			<a href="Contact.html">Contact</a>
			<a href="Store.html">Store</a>
		<p></p>
	
		<p></p><div id="hero"></div><p></p>
		<br>
			<h2>Yoga Classes</h2>
		<br>
		<dl>
			<dt>Gentle Hatha Yoga</dt>
			<div id="hideme1">Intended for beginners and anyone wishing a grounded foundation in the practice of yoga, 
				this 60 minute class of poses and slow movement focuses on asana(proper alignment and posture),
				pranayama (breath work), and guided meditation to foster your mind and body connection.<p></p></div>
			<br>
			<dt>Vinyasa Yoga</dt>
			<div id="hideme2">Although designed for intermediate to advanced students, geginners are welcome to sampe this 60 minute class 
				that focuses on breath-synchronized movement -- you will inhale and exhale as you flow energetically through 
				yoga poses.<p></p></div>	
			<br>
			<dt>Restorative Yoga</dt>
			<div id="hideme3">This 90 minute class features very slow movement and long poses that are supported by a chair or wall. This calming, 
				restorative experience is suitable for students of any level of experience.
				This practice can be a perfect way to help rehabilitate an injury.<p></p></div>
			
		</dl>
		<button id="hide">Hide Descriptions</button>
	

        Copyright 2016 © Path of Light Yoga<br>
        <a>khopkin5@my.westga.edu</a>

</div>
</body>

Here is my jQuery Code:

JavaScript

$(document).ready(function(){
    $("#hide").click(function(){
        $("#hideme1").show();
			$("#hideme2").show();
				$("#hideme3").show();
					$('#hide').text('Hide Descriptions');				
    });
    $("#hide").click(function(){
        $("#hideme1").hide();
			$("#hideme2").hide();
				$("#hideme3").hide();
					$('#hide').text('Show Descriptions');	
    });
});

What I have tried:

I have tried to change the code around by flipping it and nothing happens. I try adding a .toggle but when the page loads the button disappears so does the text.

Posted 11-Nov-16 10:30am

Computer Wiz99

Updated 14-Nov-16 18:42pm

Add a Solution

3 solutions

Solution 3

try this

JavaScript

$("#hide").click(function () {
               var text = $('#hide').text();
               if (text == 'Hide Descriptions') {
                   $("#hideme1,#hideme2,#hideme3").hide();
                   $('#hide').text('Show Descriptions');
               }
               else {
                   $("#hideme1,#hideme2,#hideme3").show();
                   $('#hide').text('Hide Descriptions');
               }
           });

Posted 14-Nov-16 18:42pm

Karthik_Mahalingam

Solution 2

Try this code:

JavaScript

$("#hide").click(function(){
       $("#hideme1").toggle();
       $("#hideme2").toggle();
       $("#hideme3").toggle();
        $('#hide').text(function(i, text){
         return text === "Show Descriptions" ? "Hide Descriptions" : "Show Descriptions";
     })
   });

Posted 11-Nov-16 20:12pm

baotdinh

Comments

Computer Wiz99 14-Nov-16 9:59am

The toggle code doesn't seem to work.

baotdinh 14-Nov-16 13:09pm

if toogle is not working :
Use this one:
$("#hide").click(function(){
var displayStyle = $('#hideme1').css('display');

if(displayStyle != 'none'){
$("#hideme1").hide();
$("#hideme2").hide();
$("#hideme3").hide();
$('#hide').text('Show Descriptions');
}else{
$("#hideme1").show();
$("#hideme2").show();
$("#hideme3").show();
$('#hide').text('Hide Descriptions');
}

});

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2016-11-11T15:10:00

Add an alert box to each of the respective functions, e.g.

JavaScript

$(document).ready(function(){
    $("#hide").click(function(){
        $("#hideme1").show();
   $("#hideme2").show();
    $("#hideme3").show();
     $('#hide').text('Hide Descriptions');
       alert('We are shown.'); // add alert to pause the action
    });
    $("#hide").click(function(){
        $("#hideme1").hide();
   $("#hideme2").hide();
    $("#hideme3").hide();
     $('#hide').text('Show Descriptions');
       alert('We are hidden.'); // add alert to pause the action
    });
});

and see for yourself the sequence of actions generated by your jQuery code. You will then understand why.
Actually, you should be using jQuery toggle() Method[^]. You should also use a class selector for the three hideme div's instead of id as you have been taught in your previous question Why is only one paragragh hiding and showing and not all?[^]

When I click on jquery button it hides the text but when I click on it again nothing happens. Why?

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us