title: jQuery - Nested list: collapse others when one opens
body: <p>I'm trying to set up an accordion style menu where, in a nested list structure, clicking the anchor tag adds a class to the neighboring <code>ul</code> which changes it's height and thus makes it visible. I've successfully made it work, but I want to extend it to close other submenus when one is selected.</p>
  
  <p>Here's my menu markup:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul id="menu" class=""&gt;
      &lt;li class="dropdown"&gt;
        &lt;a&gt;Markets &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="dropdown"&gt;
        &lt;a&gt;Management Focus &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
          &lt;li&gt;Menu Item&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>  $('li.active ul').addClass('show');
    $('#menu-market-intelligence-bar&gt;li.dropdown&gt;a').click( function(e){
      $(this).parent().children('ul').toggleClass('show');
  
      ** // $(this).parent().parent().children('li &gt; ul').not(this).removeClass('show');
  
      e.preventDefault();
    });
  </code></pre>
  
  <p>** This is my attempt to hop back up to the parent of the parent and grab it's children elements that are NOT the current element. Probably pretty ugly. Any help greatly appreciated! </p>