How to implement multilevel accordion menu

Question

I have a 3 level accordian Menu in my page. When the link in clicked in any level, the accordion is still open and the corresponding page is opened on the right side. Woking page link

Currently I am using JQuery and the XSLT. It supports three level, now I have to change it 5 level. Though the current implementation works, its bit complicated. So I would like to know, if anyone has implemented the same.

The links and titles are accssed through XSLT from the CMS and Jquery .

Answer 1

<ul class="accordion-menu">
    <li>
      <a href="#" class="title">Explore Careers</a>
      <ul>
          <li><a href="#">Set Careers</a></li>    
           <li><a href="#">Salaries</a></li>
      </ul>
    </li>
    <li class="active">
        <a href="#" class="title">Self assessments</a>
        <ul>
         <li>
          <a href="#">What is an assessment?</a>
         </li>
          <li>
            <a href="#" class="clicked">Interest assessment</a>
          </li>
          <li><a href="#">Skills assessment</a></li>
          <li><a  href="#">Work values</a></li>
       </ul>
    </li>
    <li>
       <a href="#" class="title">Learn about careers</a>
       <ul>
        <li><a href="#">Licenses</a></li>    
        <li><a href="#">Professions</a></li>
       </ul>
    </li>
</ul>

I've added a new class title to identify accordion headers to avoid using slow child selectors.

And now in your script, add this

$(document).ready(function(){

    $('.title').on('click',function(){
      var $parent = $(this).parent();
      var $siblings = $parent.siblings();  
      $siblings.removeClass('active').find('ul').slideUp('normal');
      $parent.find('ul').slideDown('normal');
      $parent.addClass('active');
    });       

});

Also in this live page that you shared, they're refreshing the whole page to get the updated content. I suggest you use AJAX to get the updated content and then update that container instead of a doing a full page refresh. This will give a better user experience and also makes it easier for you to track the selected accordion without having to retain the state between page refreshes.

Here's the updated fiddle forked from yours with my changes. Hope this helps :)