Adding / removing class with slideToggle

Question

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');

});

Answer 1

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');
    });
});