3zzy 3zzy - 4 months ago 10
jQuery Question

Simple accordion menu (jQuery)

jQuery:

// ACCORDION
$('.accordion .answer').hide(); // hide all
$('.accordion .question').click(function(){
$('.accordion .answer').slideUp(); // hide all open
$(this).addClass('active').next().slideDown(); // show the anwser
return false;
});


HTML:

<dl class="accordion">
<dt class="question">question</dt>
<dd class="answer">answer</dd>
<dt class="question">question</dt>
<dd class="answer">answer</dd>
</dl>


... works, but


  • The 'active' class must be removed from inactive question elements &

  • At least one of the answers remains open; all answers should be able to close.



Thanks!

Answer

Okay, figured it:

$('.accordion .answer').hide(); // hide all
$(".accordion .question").click(function () {
    $(this).toggleClass('active').next(".answer").slideToggle(300).siblings(".answer").slideUp("slow");
    $(this).siblings().removeClass('active');
});
Comments