Question

I have the following logic to expand / collapse Q & 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…

$(".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");
        }
    });
});

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

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

Answer 1

$(".A").hide();
$(".Q").click(function() {
    var that = this;
    $(".A:visible").slideUp("slow");
    $(".Q span.expanded")
        .removeClass('expanded')
        .addClass('collapsed');
    $(this)
        .next(".A:hidden")
        .slideDown("slow", function(){
            $('span.collapsed', that)
                .removeClass('collapsed')
                .addClass('expanded');
        });
});

Demo