Gareth Compton Gareth Compton - 3 months ago 8
Javascript Question

Jquery Selecting to hide and show issue: More than two elements

recently trying to make working pages to show and hide each element according to button, but I am somehow missing something to make this work, or somehow it isnt working at all.

When i run this example, the first two "A" links work, but not the third, is there a way to actually seperate it to where each element shows singular while hiding the rest?

Here is my coding:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("p").hide(); //to hide all P elem for user to start
$("#hide").click(function(){
$("p#2").show();
$("p#1").hide(); //Yes i tried grouping by selectors
$("p#3").hide(); //and also seperating like this
}); //but both didnt work :(
$("#show").click(function(){
$("p#1").show();
$("p#2").hide();
$("p#3").hide();
});
$("#other").click(function(){
$("p#3").show();
$("p#1").hide();
$("p#2").hide();
});
});
</script>
</head>
<body>
<div>please select a button to begin
<br />
<br />
<p id="1">If you click on the "Hide" button, I will disappear.</p>
<p id="2">If you click on the "Show" button, i will disappear!</p>
<p id="3">yay, another one</p>

<a id="hide">Hide</a>
<a id="show">Show</a>
<a id="third">other</a>
</div>
</body>
</html>

Answer

You need to replace this:

$("#other").click(function(){

With:

$("#third").click(function(){
Comments