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
Thanks!
$('.accordion .answer').hide(); // hide all
$('.accordion .question').click(function(){
if($(this).hasClass('active')) {
$(this).removeClass('active').next().slideUp();
} else {
$('.accordion .answer').removeClass('active').slideUp();
$(this).addClass('active').next().slideDown();
}
return false;
});
But you should really take a look at the jQuery UI Accordion .
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');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.