title: jQuery vertical accordion menu: parent nodes collapse when clicking child node
body: <p>I have a script that should add accordion functionality to a vertical menu. I mainly used code from <a href="http://joao-pinho.blogspot.de/2012/11/sharepoint-2013-accordion-quicklaunch.html?m=1" rel="nofollow">this blog</a>. The menu I made consists of multiple levels, the example I made in <a href="http://jsfiddle.net/xMoshii/wxu6f/" rel="nofollow">this jsFiddle</a> is only 3 levels deep but I plan on using more (it is a requirement for my client).
  <br><br>
  When an element has the class "selected", I want only that element and its parents to be shown as soon as the page loads. In the example that element is colored green, but the parents of that element should of course also be shown. When a user selects a different element to expand, it should hide the first one and show the content of the element that has just been clicked.  <br><br>
  Please take a look at the example first, and try it out a bit. Then compare it to the below. <br>
  This is how the menu should like like in the first place, as soon as the page loads:</p>
  
  <pre><code>    - Site 1
          - Site 1, page 1
          - Site 1, page 2
          - Site 1, subsite 1
              - Site 1, subsite 1, page 1
              - Site 1, subsite 1, page 2
          - Site 1, subsite 2
          - Site 1, page 3
      - Site 2
  </code></pre>
  
  <p>So as you can see, the only things that should be immediately visible are the elements that contain the class "selected" in the HTML. All the rest should be simply collapsed. Of course, as soon as a user clicks on another subsite, or on Site 1 or Site 2, it should collapse the current one which has "selected", and open up the other element that has been clicked. The behavior it has now is absolutely not what I intended it to be, I've been trying around a lot but no success so far. 
  <br><br>
  I cannot quite manage to see how I could fix this. I've been trying to make it work since last week and I'm still stuck. Therefore I would really appreciate it if someone could take a look and tell me what I'm doing wrong and why it behaves like that.<br>
  <br>
  Some additional information: this menu will be used in a SharePoint 2013 environment, it will replace the SharePoint Quick Launch menu. </p>
  
  <p><br>
  Thanks in advance for your time!</p>
  
  <hr>
  
  <p><strong>EDIT</strong>:<br>
  In case the jsFiddle becomes unavailable, here is the HTML and JavaScript code.<br><br>
  HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="sideNavBox"&gt;
      &lt;ul id="rootMenu" class="static root"&gt;
          &lt;li class="static level-0 selected"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="static level-0-ul selected"&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, page 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="static level-1 selected"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, subsite 1&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="static level-1-ul selected"&gt;
                          &lt;li class="static level-2 selected"&gt;&lt;a class="static menu-item-li selected" href="#"&gt;&lt;span&gt;Site 1, subsite 1, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, subsite 1, page 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, subsite 2&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="static level-1-ul"&gt;
                      &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1 subsite 2, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1 subsite 2, page 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 1, page 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="static level-0"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="static level-0-ul"&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, subsite 1&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="static level-1-ul"&gt;
                          &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, subsite 1, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, subsite 2&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class="static level-1-ul"&gt;
                          &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, subsite 2, page 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="static level-2"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, subsite 2, page 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, page 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="static level-1"&gt;&lt;a class="static menu-item-li" href="#"&gt;&lt;span&gt;Site 2, page 3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JavaScript: </p>
  
  <pre><code>    // Set dynamic CSS logic:
  if($('#sideNavBox .menu-item-li.selected').length){
      // Propagates the selected class, up the three:
      $('li.static').removeClass('selected');
      $('#sideNavBox .menu-item-li.selected').parents('li.static').addClass('selected');
      // Collapses top siblings of selected branch:
      $('#sideNavBox .menu-item-li.selected').parents('li.static').last().siblings().find('&gt; ul').hide();
      $('#sideNavBox .menu-item-li.selected').parents('li.static').siblings().find('&gt; ul').hide();
  }
  else {
      $('#sideNavBox .root.static &gt; li.static &gt; ul').hide();
  }
  
  /* CODE INTENDED FOR COLLAPSING AND EXPANDING THE level-0 AND level-0-ul ELEMENTS */
  $('#sideNavBox .root.static &gt; li.static.level-0').each(function(){      // For each element,
      if($(this).find('ul').length){                                      // That has a ul inside it,
          $(this).addClass('father').click(function(){                    // Add the class 'father' to it. 
              if($(this).children('ul').css('display') != 'none'){
                  $(this).removeClass('selected').children('ul').slideUp();
              }
              else {
              /*collapse-siblings*/
                  $(this).siblings().removeClass('selected').children('ul').slideUp();
              /*expand*/
                  $(this).addClass('selected').children('ul').slideDown();
              }
          });
      }
  });
  
  /* SAME CODE AS ABOVE BUT NOW INTENDED FOR COLLAPSING AND EXPANDING THE level-1 AND level-1-ul ELEMENTS */
  $('#sideNavBox .root.static &gt; li.static &gt; ul.static &gt; li.static').each(function(){
      if($('#sideNavBox .root.static &gt; li.static &gt; ul.static &gt; li.static').find('ul').length){
          $(this).addClass('father2').click(function(){
              if($(this).children('ul').css('display') != 'none'){
                  $(this).removeClass('selected').children('ul').slideUp();
              }
              else {
              /*collapse-siblings*/
                  $(this).siblings().removeClass('selected').children('ul').slideUp();
              /*expand*/
                  $(this).addClass('selected').children('ul').slideDown();
              }
          });
      }
  });
  
  /* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR FOR level-0 AND level-0-ul ELEMENTS */
  $('#sideNavBox .root.static &gt; li.static &gt; a.static').click(function(e) {
      /*Prevent the link from activating*/
      e.preventDefault();
      /*Upon clicking header, show contents*/
      $('#sideNavBox .root.static &gt; li.static').addClass('selected').children('ul').slideUp();
  });
  
  /* CODE INTENDED FOR DISABLING DEFAULT LINK BEHAVIOR BUT NOW FOR level-1 AND level-1-ul ELEMENTS */
  $('#sideNavBox .root.static &gt; li.static.level-0 &gt; ul.static.level-0-ul &gt; li.static.level-1 &gt; a.static').click(function(e) {
      /*Prevent the link from activating*/
      e.preventDefault();
      /*Upon clicking header, show contents*/
      $('#sideNavBox .root.static &gt; li.static.level-0 &gt; ul.static.level-0-ul &gt; li.static.level-1').addClass('selected');
      $('#sideNavBox .root.static &gt; li.static.level-0 &gt; ul.static.level-0-ul &gt; li.static.level-1').children('ul.level-1-ul').slideUp();
  });
  </code></pre>