title: Add more levels to expand/collapse jQuery menu
body: <p>I want to use <a href="http://perishablepress.com/jquery-accordion-menu-tutorial/#" rel="nofollow">this expand/collapse jQuery menu</a> on my website, but I need to nest more levels. This doesn't seem to be working by just nesting a  to the sub-menu items I want to expand. Has anyone had any luck doing this?</p>
  
  <p>Update: My code so far...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id='cssmenu'&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;a href='http://google.com'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='http://google.com'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href='http://google.com'&gt;Widgets&lt;/a&gt;&lt;/li&gt;
           &lt;li class="has-sub active"&gt;&lt;a href='http://google.com'&gt;&lt;span&gt;Menus&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='http://google.com'&gt;Widgets&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Menus&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href='#'&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li&gt;&lt;a href='#'&gt;Products&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Company&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href='#'&gt;About&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href='#'&gt;Location&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function(){
  
    $('#cssmenu &gt; ul &gt; li:has(ul)').addClass("has-sub");
  
    $('#cssmenu &gt; ul &gt; li &gt; a').click(function() {
      var checkElement = $(this).next();
  
      $('#cssmenu li').removeClass('active');
      $(this).closest('li').addClass('active');   
  
  
      if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
      }
  
      if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
      }
  
      if (checkElement.is('ul')) {
        return false;
      } else {
        return true;  
      }       
    });
  
  });
  </code></pre>