title: display content when window width is more than certain value - jquery
body: <p>html</p>
  
  <pre><code>&lt;div id="navBar"&gt;
      &lt;div class="navBarStyles"&gt;
          &lt;ul class="mainNavBar"&gt;
              &lt;li&gt;&lt;div class="menu-icon"&gt;z&lt;/div&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;WORKS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ARTICLES&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;EXTRA&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>@media only screen
      and (max-width : 500px) {
  
          #navBar .mainNavBar li ul{
              position: absolute;
              display: block;
              width: 100%;
              background-color: #FFFFFF;
              text-align: center;
          }
          #navBar .mainNavBar li ul a{
              color: #666666;
              display: block;
              text-align: center;
              width: 50px;
          }
          .mainNavBar{
              width: 500px;
          }
          #navBar .mainNavBar li ul{
              display: none;  /*hide*/
          }
      }
  
  .menu-icon:hover{
      cursor: pointer;
      opacity: 1;
  }
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>$(function() {                       
    $(".menu-icon").click(function() {  
      $("#navBar .mainNavBar li ul").toggle();     
    });
  });
  
  if($(window).width() &gt; 500){
  $(".mainNavBar").show();
  </code></pre>
  
  <p>}</p>
  
  <p><a href="http://jsfiddle.net/aAVV7/" rel="nofollow">jsFiddle</a></p>
  
  <p><a href="http://jsfiddle.net/aAVV7/2/" rel="nofollow">changed condition - still not working</a></p>
  
  <p>Above code works fine, the only problem is when the width is less than <code>500</code> and user clicks on the <code>z</code> button to show the menu, then again clicks back to hide it, and the window is re-sized to greater than <code>500</code> the buttons doesn't show back. Please help. Need to fix the if statement in jquery code.</p>