Question

I am currently having a problem with multiple div’s toggling at the same time.
I have these 4 div’s with the same class that I want to display, how do I do that?

<div id="container">
    <div class="box"><!-- box 1 -->
    <div class="link"><a href="#" class="show">show content</a></div>
    <div class="hidden">this text is hidden</div>
    </div><!--box ends-->

    <div class="box"><!-- box 2 -->
    <div class="link"><a href="#" class="show">show content</a></div>
    <div class="hidden">this text is hidden</div>
    </div><!--box ends-->

</div><!--container ends -->

I think you get the point. The problem is, this is comes from a php while, if the user haven’t contributed any content, then there wouldn’t be any div’s, and if he have, there will display div’s equal to all his contributions.

I have tried with

$(".show").click(function(){
$(".hidden").toggle();
});

but the above code shows all of them, so how do I show the one that was need to be shown ?
I hope you understand.

Answer 1

Use:

$(".show").click(function(){
  $(this).parent().next(".hidden").toggle();
});

parent() gets you div.link and next() gets you div.hidden which would toggle.