Expand only one section w/ jQuery
<p>I know it's been done before but I'm trying to write this from scratch myself...</p>

<p>I have Q &amp; A section in the following format:</p>

<pre><code>&lt;div class="Q"&gt;aaaa&lt;/div&gt;
&lt;div class="A"&gt;bbbb&lt;/div&gt;

&lt;div class="Q"&gt;cccc&lt;/div&gt;
&lt;div class="A"&gt;dddd&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>Here's what I've got so far:</p>

<pre><code>$(".A").hide();
$(".Q").click(function() {
    $(this).next("div").slideToggle("slow");
});
</code></pre>

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