Why is only one paragragh hiding and showing and not all?

Question

0.00/5 (No votes)

See more:

I have a HTML site I am working on and I am using jQuery on a certain part. I have created a Hide and Show function but can only get the first paragraph to hide and show and not all at the same time. Did I miss something within the jQuery code or HTML code?

Here is the 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/1.12.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="yoga.js"></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>
	<button id="hide">Hide</button>
	<button id="show">Show</button>

			<h2>Yoga Classes</h2>
		<br>
		<dl>
			<dt>Gentle Hatha Yoga</dt>
			<dd><div id="p">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></dd>
			<br>
			<dt>Vinyasa Yoga</dt>
			<dd><div id="p">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></dd>	
			<br>
			<dt>Restorative Yoga</dt>
			<dd><div id="p">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></dd>
			
		</dl>

	

        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(){
        $("#p").hide();
    });
    $("#show").click(function(){
        $("#p").show();
    });
});

Please Help!

What I have tried:

I have tried different jQuery functions and toggle function. I know that the toggle function doesn't work any more.

Posted 10-Nov-16 14:55pm

Computer Wiz99

Updated 10-Nov-16 18:12pm

Add a Solution

3 solutions

Solution 1

Id's are meant to be unique. Don't give multiple tags the same Id.

If you want to change multiple tags, give them the same CSS class, not the same Id. Then you need to change your selectors in the code you're using to hide and show the tags. They have to search for a class name not an id.

Posted 10-Nov-16 15:40pm

Dave Kreskowiak

Comments

Computer Wiz99 10-Nov-16 22:09pm

Which tags are you talking about? Div id or something else?

Dave Kreskowiak 10-Nov-16 22:14pm

The DIV's you have the Id tag you're looking for.

Solution 3

An example speaks a thousand word...
You are teaching a class named CW1601B. In that class, there is a total of 38 students each having a unique id (assuming it is the student name). How do you choose a particular student to answer your question during a lesson? Yes, you call that student by id (name), right? Coming to the end of the lesson, you dismiss the class by calling the class name, right? Of course, you can also call out the 38 ids(names) one by one. The same concept applies in the naming and selection of HTML elements in JQuery and CSS.
Learn jQuery Selectors[^]

Posted 10-Nov-16 18:12pm

Peter Leow

v2

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)

Karthik_Mahalingam · Accepted Answer · 2016-11-10T17:47:00

Solution 2

change the id to class

HTML

<dd><div id="p">

HTML

<div class="p"></div>

and in jquery

JavaScript

$(".p").hide()

JavaScript

$(".p").show()

or you wil have to use .filter() [^]

JavaScript

$('div').filter('#p').hide()

Posted 10-Nov-16 17:47pm

Karthik_Mahalingam

Updated 10-Nov-16 17:50pm

v2

Comments

Computer Wiz99 11-Nov-16 15:15pm

Okay, So how can I get the Hide and Show button to use only one button and to change text on that button?

Karthik_Mahalingam 13-Nov-16 6:38am

need more info