title: jQuery Menu > Collapse All Not WIthin Current Tree
body: <p><strong>Menu <em>- Snippet</em></strong></p>
  
  <pre><code>&lt;ul class="Menu Open"&gt;
      &lt;li&gt;
          &lt;a href="javascript:;" data-title="Account"&gt;
              &lt;span class="Title"&gt;Account&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="sub-menu First TeStInG"&gt;
              &lt;li&gt;
                  &lt;a href="javascript:;" data-title="Account/Dashboard"&gt;
                      &lt;span class="Title"&gt;Dashboard&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="javascript:;" data-title="Account/Messages"&gt;
                      &lt;span class="Title"&gt;Messages&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="javascript:;" data-title="Account/Messages/Compose"&gt;
                              &lt;span class="Title"&gt;Compose&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="javascript:;" data-title="Account/Profile"&gt;
                      &lt;span class="Title"&gt;Profile&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="javascript:;" data-title="Account/Profile/View"&gt;
                              &lt;span class="Title"&gt;View&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JQuery <em>- Snippet</em></strong></p>
  
  <pre><code>$(document).ready(function() {
  
      "use strict";
  
      $(document).on('click', function(e) {
          if ($(e.target).closest($('.Menu')).length) {
  
              if ($(e.target).closest("a").siblings("ul").length === 0) {
                  console.log('Doesn\'t have Children');
              } else {
                  $(e.target).closest("a").siblings("ul").show();
              }
  
          }
  
      });
  
  });
  </code></pre>
  
  <p><strong>What I'm Trying To Achieve</strong></p>
  
  <p>Without using jQuery UI, I would like to make it so that only one menu item is visible at a time on each level.</p>
  
  <ul>
  <li>If the user has expanded a level multiple times then clicks on a different higher level, all within should be hidden.</li>
  <li>If the user clicks on a same level item which expands, all other same level should be hidden.</li>
  </ul>
  
  <p>I've tried several ways to do this, however I keep getting tied up whereas I either make things hide which shouldn't or make it so that I cannot expand anything. I've done this previously and cannot understand why I cannot do this now.</p>