Question

I have got a button that only appears when it hits a certain media query. Now it works fine, the button appears, clicking the button will reveal the sidenav. Clicking again closes the menu.

My problem is this – I’ve got a class that toggle with it as well, called ‘open’. This enables me to use a different icon to represent open and close. But i need a delay on the toggle class so the icon doesn’t change until the menu bar has closed.

$(document).ready(function() {
        /* prepend category button */
        $('.side-bar').before('<div id="button"><p class="sidebar-button"> Menu </p></div>'); //insert html for menu button

            $(".sidebar-button").click(function() { //click menu button and do..

                setTimeout(function(){ //i added this..

              $(".side-bar").slideToggle(); //toggle sidebar
              $(this).toggleClass("open"); // toggle class on button for 'open'
            });
        },5000); // other part of the seTimeout
    });

Whats the best way to achieve this? Live example for the purpose of this question: http://jsfiddle.net/rXt39/2/

EDIT

This might help someone looking for a similar thing. I found a solution here:

jQuery and setTimeout

Note: I ended up changing my code on the answer below. It’s now working perfectly.

Answer 1

Use a callback for the menu to toggleClass the icon when its finished

      $reference = $(this)

      $(".side-bar").slideToggle(function(){
            $reference.toggleClass("open");           
      });

I added a .open class in the CSS to turn the word menu yellow while expanded.

solution