Question

I am trying to write a simple function where I click a div and a hidden area expands and on another click it collapses. That part works. But in addition, I’d like to show an arrow indicator change to Up when expanded and Down when collapsed. That part seems to work only on initial click, when it expands but does not change back when the area collapses. What am I missing?

Here’s what I’ve written

$(".myDiv").click(function() {
        var $expandable = $(this).parent().find(".expandable");
        $expandable.slideToggle("fast");
        if ($expandable.is(":visible")) {
            $(this).find("span").removeClass("Down").addClass("Up");
        } else {
            $(this).find("span").removeClass("Up").addClass("Down");
        }
});

Answer 1

Rather than test on visibility, test for the class?

$(".myDiv").click(function() {
        var $expandable = $(this).parent().find(".expandable");
        $expandable.slideToggle("fast");
        var $span = $(this).find("span");
        if ($span.hasClass("Down") ){
            $span.removeClass("Down").addClass("Up");
        } else {
            $span.removeClass("Up").addClass("Down");
        }
});