Vertical menu type accordion

Question

I have problem with vertical menu type accordion.

<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
  <li><a href="" class="">Investment advantage</a></li>
  <li><a href="" class="">Statistics </a></li>
     <ul class="nav-section-level-3">
      <li><a href="" class="">Clean technology</a></li>
      <li><a href="" class="">Food and beverage</a></li>
      <li><a href="" class="">Fund investment</a></li>
      <li><a href="" class="">High-value manufacturing</a></li>
      <li><a href="" class="">Information and communications technology</a></li>
      <li><a href="" class="">Infrastructure</a></li>
      <li><a href="" class="">Life sciences</a></li>
      <li><a href="" class="">Petroleum and minerals</a></li>
      <li><a href="" class="">Resource manufacturing</a></li>
    </ul>
  <li><a href="" class="">Investment regulations</a></li>
  <li><a href="" class="">How can we help</a></li>
  <li class="is-selected"><a href="" class="">Sectors of opportunity</a>
    <ul class="nav-section-level-3">
      <li><a href="" class="">Clean technology</a></li>
      <li><a href="" class="">Food and beverage</a></li>
      <li class="is-selected"><a href="" class="selected">Fund investment</a></li>
      <li><a href="" class="">High-value manufacturing</a></li>
      <li><a href="" class="">Information and communications technology</a></li>
      <li><a href="" class="">Infrastructure</a></li>
      <li><a href="" class="">Life sciences</a></li>
      <li><a href="" class="">Petroleum and minerals</a></li>
      <li><a href="" class="">Resource manufacturing</a></li>
    </ul>
  </li>
    </ul>
   </div>
  </div>

and

<script type="text/javascript">
  $(function(){    
       $(document).on('click', ".nav-section-level-2 li", function(e){
           e.preventDefault();

           $(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');

           if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') ) 
      $('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});

     $(document).on('click', ".nav-section-level-3 li", function(e){
         e.preventDefault();

         $(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
      });
   });
 </script>

algorithm vertical menu is working, but very bad. collapsed and expanded not working correctly!

How can I find resolve for my problem?

Please, ready resolves (type JQuery UI) not to offer.

Thank you very much.

Answer 1

I am not sure if I got it right. But here is one solution:

Modified example

    $(function(){    
       $(".nav-section-level>li").on('click',function(e){
           var ulElement = $(this).find('ul');

           var isSameElement = $(ulElement).hasClass("open");

           if( $("ul.open") !== undefined){
               $("ul.open").slideToggle('slow');
               $("ul.open").removeClass("open");
           }
           if(!isSameElement){
               $(ulElement).slideToggle('slow');
               $(ulElement).addClass("open");
           }
       });  
});

First of all your html is little messy clean it up. Second you do not need to add any classes or anything to your li. Simple slidetoggle on click. Which will show hide your child ul.