HTML :
<div id="accordion">
<div class="title"><span>Accordian 1</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 2</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="title"><span>Accordian 3</span></div>
<div class="hide">
<p>hidden content</p>
</div>
<div class="close"><span>Close all the accordions</span></div>
</div>
Use slideToggle()
, to toggle between slideUp
and slideDown
$(document).ready(function() {
$('#accordion .hide').hide();
$('#accordion .title span').click(function(){
$(this).parent().next()
.slideToggle()
.siblings('.hide').slideUp();
return false;
});
$('.close').click(function(){
$('#accordion .hide').slideUp();
});
});