title: jQuery Toggle does not show on window resize
body: <p>I'm using jQuery slideToggle function and the media queries. </p>
  
  <p>The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.</p>
  
  <p>If I do not click on the toggle link, and resize the window back to large size, it works fine.</p>
  
  <p><strong>Demo to see the problem:</strong></p>
  
  <p>Please check the demo here, where you can see the problem:
  <a href="http://jsfiddle.net/3Jj7J/" rel="nofollow">http://jsfiddle.net/3Jj7J/</a></p>
  
  <p>Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="bar"&gt;
      &lt;a class="toggle" href="#"&gt;MAIN MENU&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="nav"&gt;
      &lt;div class="wrap"&gt;
          &lt;ul&gt;
              &lt;li&gt;Link 1&lt;/li&gt;
               &lt;li&gt;Link 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.bar{
      display: none;
      border: 1px solid red;
  }
  
  @media screen and (max-width: 500px) {
       .nav ul { 
          display: none;
      }
  
      .bar{
          display: block;        
      }
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>var menu = jQuery('.nav .wrap &gt; ul');       
  jQuery(".toggle").click(function() {
      menu.slideToggle(500);
  });
  </code></pre>