title: JQuery Toggle: Cancel Timer
body: <p>I have a jQuery script that toggles a navigation menu, and then closes it after five seconds:</p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      function toggleMenu() {
        $( "#menu-nav" ).toggle( "blind", 500 );
      };
       $( ".nav-open" ).click(function() {
        toggleMenu();
        setTimeout(function(){
           $( "#menu-nav" ).toggle( "blind", 500 );
       }, 5000);
      });
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>It works great.</p>
  
  <p>I also want the menu to close when the user clicks on one of the links:</p>
  
  <pre><code> &lt;script&gt;
    $(function() {
      function closeMenu() {
        $( "#menu-nav" ).toggle( "blind", 500 );
      };
       $( ".nav-close" ).click(function() {
        closeMenu();
        return false;
      });
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>It works great, as well.</p>
  
  <p>The problem is that if the when the user clicks on the link, the timer is still running. When it hits the 5 second mark, it toggles, so the menu reappears. Then, if the user clicks on the element that shows the menu, it closes it, but restarts the timer, the menu appears after five seconds, and everything gets out of whack.</p>
  
  <p>How can get the second script to cancel the timer in the first script, or am I just going about all of this the wrong way?</p>
  
  <p>Thanks in advance for any assistance!</p>