Add/remove class on secrtion collapse/expand w/jQuery
<p>I have the following logic to expand / collapse Q &amp; A sections. I am trying to add a class to "A" to indicate collapsed/expanded state. I think I'm overcomplicating the matter, and it doesn't work...</p>

<pre><code>$(".A").hide();
$(".Q").click(function() {
    $(".A:visible").slideUp("slow");
    $(this).next(".A:hidden").slideDown("slow");

   // part below does not work !!!
    $(this).each(function(){
        if ($(this).is(":visible")) {
            $(this).find("span").removeClass("collapsed").addClass("expanded");
        } else {
            $(this).find("span").removeClass("expanded").addClass("collapsed");
        }
    });
});

&lt;div class="Q"&gt;&lt;span class="collapsed"&gt;&lt;/span&gt;aaaa&lt;/div&gt;
&lt;div class="A"&gt;bbbb&lt;/div&gt;

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