title: How to make a dynamic accordion menu with jQuery
body: <p>Lets say I have the following menu structure. I have 3 problems with it.</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>$('.parent ul').hide();
  
  var current_parent;
  $(document).delegate('.parent', 'click', (function() {
    var $this = $(this);
    
    if(current_parent !== undefined) {
      current_parent.find('ul').slideUp();
    }
    
    current_parent = $this;
  
    // Check if the element is visble or not
    if(!$this.find('ul').is(':visible')) {
      $this.find('ul').slideDown();
    } else {
      $this.find('ul').slideUp();
    }
  }));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="menu"&gt;
    &lt;li class="parent"&gt;menu item1
      &lt;ul&gt;
        &lt;li class="child"&gt;Sub menu item1&lt;/li&gt;
        &lt;li class="child parent"&gt;Sub menu item2
          &lt;ul&gt;
            &lt;li class="child"&gt;Sub-sub menu item1&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    
    &lt;li class="parent"&gt;menu item2
      &lt;ul&gt;
        &lt;li class="child"&gt;Sub menu item3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol>
  <li>When you click on <code>menu item 1</code> the <code>Sub-sub menu item1</code> is also
  opened. How can this be prefented?;</li>
  <li>When you click on <code>Sub menu item2</code> the <code>menu item1</code> is also closed. How can this be prefented?.</li>
  <li>How can I make this more dynamic so that when I add deeper menu items the menu still works but without having to add things like: <code>$('ul ul ul').slideDown();</code> etc.?</li>
  </ol>
  
  <p>Could anyone help me with these problems?</p>
  
  <p>Thanks in advance</p>