여러 div가있는 jquery slideDown/slideUp

Question

어떻게이 스크립트를 여러 Div에 사용할 수 있습니까?

스크립트 :

$(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> 

내가 모두 div의이 아래로 슬라이드 "BluB 효소"를 클릭합니다.
모든 사업부에 개별 ID와 개별 스크립트를 추가하고 싶지 않습니다. 이 같은

Answer 1

당신은 올바른 몸의 요소를 잡아 next()를 사용할 수

및 slideToggle() : 나는 CSS 코드를 추가 한

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

jsFiddle here

Answer 2

은 보이게하는 더 좋은

.slidedown_body{ 
 
    background-color: #FAFAFA; 
 
    padding: 30px; 
 
}

$(document).ready(function(){ 
 
var $panel = $('.slidedown_head'); 
 
$panel.click(function() { 
 
    $(this).next('.slidedown_body').slideToggle("fast",function() { 
 
\t \t $('.slidedown_body').animate({width: '120px', opacity: '0.8'}, "slow"); return true;}); 
 
}); 
 
});

,

display: none; 
    margin-left: 50px; 
    position:absolute; 
    z-index:100; 
    border: 2px solid; 
    border-style: dashed; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-color: #BDBDBD; 
}