title: I want to make a navigation bar that i can hide and unhide with javascript
body: <p>I want to make a navigation bar that i can hide and unhide with javascript. I know this should work from jsfiddle (<a href="http://jsfiddle.net/3pu868em/" rel="nofollow">http://jsfiddle.net/3pu868em/</a>). Any help would be great thanks. I know it's something basic i've done wrong. Thanks for any help.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Hide the Navigation&lt;/title&gt;
  &lt;style&gt;
  .hidding{
      display: none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
     &lt;ul&gt;
         &lt;a href="#"&gt;&lt;/a&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;/a&gt;&lt;li&gt;Contents&lt;/li&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;/a&gt;&lt;li&gt;Social Media&lt;/li&gt;&lt;/a&gt;
     &lt;/ul&gt;
     &lt;div class="handle"&gt;Menu&lt;/div&gt;
  &lt;/nav&gt;
  &lt;script&gt;
  $('.handle').on('click', function(){
              $('nav ul').toggleClass('hidding');               
        });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>