Question

Hi I am trying to create a page that uses the Hide and show functions multiple times to hide differernt pieces of text. I followed a tutorial on w3schools and edited the code to try and make it work. However I am getting and error whereby the hide and show function only works on the first piece of text and not the others.
here is my code

<script type="text/javascript" src="/javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
 $("#show").click(function(){
    $("p").show();
  });
});
</script>
<div class="questions" id="question-1">
    <h1>Question</h1>
</div>
<p>
    answer</p>
<div id="hide">
    Hide</div>
<div id="show">
    Show</div>
<div class="questions" id="question-2">

        <h1>Question</h1>
</div>
<p>
    Answer</p>
<div id="hide">
    Hide</div>
<div id="show">
    Show</div>

Does anyone know as to why this may be happening?

Answer 1

because you are using id’s instead of classes. id’s are allowed to exist once in a html page.

Ok, for your comment, you can relate them with an attribute like this :

<p rel='answer_1'>Answer</p>
<div class="hide" answer='1'>Hide</div>
<div class="show" answer='1'>Show</div>

and then in your script :

$(".hide").click(function(){
    $("p[rel='answer_" + $(this).attr("answer") + "']").hide();
});

$(".show").click(function(){
    $("p[rel='answer_" + $(this).attr("answer") + "']").show();
});