title: jQuery setTimeout on toggle class
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>$(document).ready(function() {
          /* prepend category button */
          $('.side-bar').before('&lt;div id="button"&gt;&lt;p class="sidebar-button"&gt; Menu &lt;/p&gt;&lt;/div&gt;'); //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
      });
  </code></pre>
  
  <p>Whats the best way to achieve this? Live example for the purpose of this question: <a href="http://jsfiddle.net/rXt39/2/" rel="nofollow noreferrer">http://jsfiddle.net/rXt39/2/</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>This might help someone looking for a similar thing. I found a solution here:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/7085925/jquery-and-settimeout?rq=1">jQuery and setTimeout</a></p>
  
  <p><strong>Note:</strong> I ended up changing my code on the answer below. It's now working perfectly.</p>