Question

I’m using jQuery to slide a menu open and closed when a link is clicked which is working great. However, I’m trying to add a class when the link is clicked before the menu slides open then remove the same class after the menu slides back closed.

So: click > addClass > slide menu open > click again > slide menu closed > removeClass

    $("#categoryNav").hide();
    $('#showHideLink').click(function(){
        $("#categoryNav").slideToggle(function() { 
            $('#showHideLink').toggleClass("catMenuOpen");
            $('#mainNav').toggleClass("catMenuOpen");
        });
    });

I’ve tried adding $('#mainNav'.addClass('catMenuOpen'); before the slideToggle function instead of using the toggleClass which gives me the correct effect on the first click, but I can’t figure out how to remove the class after the nav has closed again.

Cheers

EDIT:
Here is my HTML:

    <div id="mainNav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a id="showHideLink">Show Hide</a></li>
        </ul>
    </div>
    <div id="categoryNav">
        <ul>
            <li><a href="#">CatMenu</a></li>
        </ul>
    </div>

Answer 1

This will do it in the order you asked:

$('#showHideLink').click(function(){

    if (!$("#categoryNav").is(":visible"))
        $('#showHideLink, #mainNav').addClass("catMenuOpen");

    $("#categoryNav").slideToggle(function() { 
        if (!$("#categoryNav").is(":visible"))
            $('#showHideLink, #mainNav').removeClass("catMenuOpen");
    });
});

EDIT

Check it in this jsfiddle