title: jQuery multilevel submenu
body: <p>Ok this might be pretty simple but can’t make it…</p>
  
  <p>What i want to make is a sub menu with multilevel support</p>
  
  <p>Right now step by step:</p>
  
  <ol>
  <li><p>hide all “li” with “ul”</p></li>
  <li><p>Show subnav by adding Class “Show-subnav” to the li > ul when it is clicked</p></li>
  </ol>
  
  <p>Problem: All the clicked li > ul remain open</p>
  
  <p>How can i make the previously clicked subnav’s close?</p>
  
  <p>Ex: When you click Item1 it show Item1 > Level 1 subnav but remains open even after clicking Item 2 subnav. Item1 should close when you click Item 2.</p>
  
  <p><a href="http://codepen.io/vinnie/pen/QjwKOR" rel="nofollow">feel free to edit this pen</a>  </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() {
  
    // Toggle Sub Nav
    $("#nav li:has(ul)").children("ul").hide(); // hide the li UL
    $("#nav li:has(ul)").find("a").click(function() {
      // Add .show-subnav class to revele on click
      $(this).parent().find("ul:first").toggleClass("show-subnav");
      // how to hide previously clicked submenus?
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#nav .show-subnav {
    display: block!important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Nav primary start  --&gt;
  &lt;nav id="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1 Submenu&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 Submenu&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Level 2 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Level 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Level 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Level 2&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2 Submenu&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Level 1 &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#section-3"&gt;Link 3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#section-4"&gt;Link 4&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#section-5"&gt;Link 5&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>