title: Showing nav I previously hid with jQuery; jQuery versions?
body: <p>I'm trying to create a simple site that changes with certain resolution. Normally,  the structure is <code>header</code> and <code>nav</code> above <code>article</code> and <code>aside</code>, which are next to each other. </p>
  
  <p>In CSS, there are 2 @media queries: one for when the site is smaller in width than 530px and one when it's wider.</p>
  
  <p>When the width of the site is smaller than 530px, the <code>aside</code> and <code>header</code> elements are affected with <code>display:none</code>, and the only things left on the site are <code>nav</code> and <code>article</code>.</p>
  
  <p>When this happens, a toggle button <code>#sidemenu</code> appears in the <code>article</code>, which hides/shows the <code>nav</code> and moves the article over it, the jQuery for it is this:</p>
  
  <pre><code>$('#sidemenu').toggle(
  function () {
    $('article').css('marginLeft', '0')
    $('nav').hide()
  }, function () {
    $('article').css('marginLeft', '20%')
    $('nav').show()
  })
  </code></pre>
  
  <p>This works, but when the resolution changes back to something wider (I'm testing this by changing browser's window size), either the <code>article</code> is still affected by the <code>marginLeft</code> (if I left the toggle showing the <code>nav</code>), or <code>nav</code> by <code>$('nav').hide()</code> (if I left the <code>nav</code> hidden). It gets fixed by refreshing the page.  </p>
  
  <p>I tried adding this jQuery:</p>
  
  <pre><code>if ($(window).width() &gt; 530 {
      $('nav').show()
      $('article').css('marginLeft', '0')
  }
  </code></pre>
  
  <p>But adding it only causes the above toggle not to work. I also tried to show the <code>nav</code> based on aside's visibility, because it appears with wider resolution, but that led to the same issue. </p>
  
  <p>I'm lost here, how do I solve this?</p>
  
  <p>Also, I have 2 additional questions. This is my first time using jQuery and I managed to make this work with </p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>when I use version 1.11.3, the jQuery doesn't work. Which is the correct version to use? Why does it work in 1.5.2, but not in 1.11.3?</p>
  
  <p>And the second question: It only started working when I moved the <code>&lt;script&gt;</code> at the end of html (just in front of <code>&lt;/body&gt;</code>), why?</p>
  
  <p>Edit: Managed to 'fix' the marginLeft problem by changing up the CSS a bit, so the margin change from jQuery doesn't affect the wider site. The hidden nav still remains though.</p>
  
  <p>Edit2: Changed my jQuery so that it's compatible with the newer versions (got rid of toggle). The hidden nav still remains though.</p>
  
  <p>Edit3: added some semicolons as recommended. Jsfiddle with the issue: <a href="https://jsfiddle.net/hThGb/4372/" rel="nofollow">https://jsfiddle.net/hThGb/4372/</a></p>