добрый вечер,

нужна помощь в коррекции jquery к вертикальному меню типа аккордеон.

код html следующий:

<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>

код js такой:

<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>

Алгоритм работает в плане раскрытия и закрытия меню и выделения на втором и третьем уровнях разделов, но почему-то при клике по разделам второго уровня открываются все меню третьего и наоборот.

подскажите что изменить в коде jquery для более корректной работы меню.

Большая просьба готовые решения не предлагать, очень нужно доработать этот вариант.

спасибо за любую помощь.