Adding / removing class with slideToggle

css, html, javascript, jquery

Solution

You could try that and see if it fits your needs:

$j('h3.sub-menu-dropdown-btn').click(function(){
    var $self = $j(this);
    $j('.sub-menu-dropdown').slideToggle('fast', function(){
        $self.toggleClass('arrow-up arrow-down');
    });
});

Problem

When clicking on a heading a menu (ul/li) is slided down / up with slideToggle. As background of the heading I have an arrow pointing down if menu isn't visible, up otherwise (I have two classes, 'arrow-up' and 'arrow-down' for the background). Below is what I've tried but it doesn't work. What would be a good solution? ``` $j('h3.sub-menu-dropdown-btn').click(function(){ if ($j('ul').is(":visible")) { $j(this).removeClass('arrow-up'); $j(this).addClass('arrow-down'); } else { $j(this).removeClass('arrow-down'); $j(this).addClass('arrow-up'); } $j('.sub-menu-dropdown').slideToggle('fast'); }); ```

Original source