Can't show div on click
<p>I've searched for an answer but I still don't know where I'm going wrong.</p>

<p>When it's a small screen the menu box appears as it should, everything looks great but when I click it, nothing happens. </p>

<p>This is my code</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('#i-nav').click(function() {
    $('nav').toggleClass('show');

  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>}
nav ul {
  float: right;
  list-style: none
}
nav li {
  display: inline;
  float: left;
  height: 80px;
  margin-right: 20px;
}
nav li a {
  display: block;
  float: left;
  height: 70px;
  line-height: 90px;
  padding: 0px 30px;
  font-family: sans-serif;
}
nav ul a {
  text-decoration: none;
  color: #ffffff;
  font-size: 30px;
  text-shadow: 2px 2px 2px #000000;
}
#i-nav {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 54px;
  height: 54px;
  background: #ffffff;
  line-height: 50px;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
}
@media (max-width: 950px) {
  nav ul {
    width: 100%;
  }
}
@media (max-width: 700px) {
  nav ul {
    display: none;
  }
  nav li {
    width: 100%;
  }
  nav li a {
    width: 100%;
    text-align: center;
    outline: solid 1px;
    padding: 0px;
  }
  nav li a:hover {
    background: #CCCCCC;
  }
}
@media (max-width: 450px) {
  #logo {
    width: 100%;
  }
  #logo img {
    width: 100%;
  }
  #i-nav {
    top: 100px;
  }
  h1 {
    width: 100%;
  }
}
@media (min-width: 700px) {
  #i-nav {
    display: none;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text.css" href="style.css"&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="main.js"&gt;&lt;/script&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;header&gt;
    &lt;div id="logo"&gt;
      &lt;img src="img/logo.png" width="300" height="88" alt="" /&gt;
    &lt;/div&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;a id="i-nav" href="#"&gt;Menu&lt;/a&gt; 
  &lt;/header&gt;</code></pre>
</div>
</div>
</p>