Search code examples
javascriptjqueryhtmlslidedown

jquery slideDown/slideUp with multiple divs

how can I use this script for multiple Divs?

Script:

$(document).ready(function(){
    $('.slidedown_head').toggle(function(){
        $('.slidedown_body').slideDown();
    }, function(){
        $('.slidedown_body').slideUp();
    });
});


HTML:

<div class="slidedown_head">
    Blub
</div>
<div class="slidedown_body" style="display:none">
    <p>bla</p>
    <p>blablub</p>
</div>
<div class="slidedown_head">
    Blub
</div>
<div class="slidedown_body" style="display:none">
    <p>bla</p>
    <p>blablub</p>
</div>

If i click on "Blub" both divs slide down.
I don't want to add for every Div an individual ID and an individual Script.

Solution

  • You could use next() to grab the correct body element, and slideToggle() like this:

    $('.slidedown_head').click(function() {
   $(this).next('.slidedown_body').slideToggle();
});

    jsFiddle here