user3525622 user3525622 - 10 days ago 7
HTML Question

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.

Answer

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

Comments