jquery - JQuery Show local div on multiple div rows

Question

I am dynamically displaying multiple rows of div's.

Div sets look like this:

<div class="triggerbutton">
    <img src="/images/clickme.png" alt="" />
</div>

<div class="hiddendivs" style="display:none;">
    some stuff here 
</div>

I am using this JQuery:

$('.triggerbutton').click(function() {

    $('.hiddendivs').show('slow');

});

But I only want the hiddendivs after the triggerbutton to be showed and not all the hiddendivs available.

How can I do this?

Answer 1

Assuming hiddendivs is the next sibling you could use

$('.triggerbutton').click(function() {
    $(this).next().show('slow');
});

Answer 2

$('.triggerbutton').click(function() {
   $(this).closest('.hiddendivs').show('slow');
});

Answer 3

you can use .next() in jQuery

$('.triggerbutton').click(function() {

    $(this).next().show('slow');

});

Answer 4

Try with code. It works like this, find next immediate div with class hiddendivs and shows it.

$('.triggerbutton').click(function() {

    $(this).next('div.hiddendivs').show('slow');

});

Answer 5

Using next you will only refer to the next element following the selector. You can also use nextAll for all following divs:

$('.triggerbutton').click(function() {
    $(this).nextAll('.hiddendivs').show('slow');
});

Fiddle here