title: Jquery multilevel accordion using UL
body: <p>I am trying to create a multilevel accordion using nested unordered list.</p>
  
  <p>What I am trying to accomplish:</p>
  
  <ul>
  <li><p>Show only the "active" ul (other
  remain hidden)</p></li>
  <li><p>When there is a nested ul - toggle
  only the nested ul (2222 -> 2.1)</p></li>
  </ul>
  
  <p>Full code here: <a href="http://pastie.org/852421" rel="nofollow noreferrer">http://pastie.org/852421</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
  
      $('ul.menu li ul').hide();
  
      $('ul.menu li a').click(function(e){
  
          $('ul.menu li a').each(function(i){
              if($(this).next().is("ul") &amp;&amp; $(this).next().is(":visible")){
                  $(this).next().slideUp("fast");
              }
          });
  
          var e = $(e.target);                
  
          if(e.next().is("ul") &amp;&amp; e.next().is(":visible")){
              e.next().slideUp("fast");
              } else {
              e.next().slideDown("fast");
          }
      });
  
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;11111&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" id="one"&gt;1.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="one"&gt;1.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;22222&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;2.1+ (problem)&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2.1.1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2.2.2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;2.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;33333&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;3.1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;3.2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>