Question

I know it’s been done before but I’m trying to write this from scratch myself…

I have Q & A section in the following format:

<div class="Q">aaaa</div>
<div class="A">bbbb</div>

<div class="Q">cccc</div>
<div class="A">dddd</div>

I need to click Q and expand A immediately below. Only one section should be expanded at a time. For example, if I have A:bbbb expanded and then I click Q:cccc I need to collapse A:bbbb and expand A:dddd.

Here’s what I’ve got so far:

$(".A").hide();
$(".Q").click(function() {
    $(this).next("div").slideToggle("slow");
});

How do I collapse any possibly open section before opening the new one without making it collapse first before expanding?

Answer 1

Easy as this:

$('.q').click(function() {
    $('.a:visible').slideUp('slow');
    $(this).next('.a').is(":hidden").slideDown('slow');
})