How to change a two-level jQuery expanding menu to be three levels?

Question

I currently have a 2-level expanding menu that triggers using jQuery. I've been going round in circles and keep confusing myself on how to update the if/else statements to work for multi-level (a third-tier). I wondered if anyone could help me finish this off?

jsFiddle example

Thanks in advance!

HTML:

<ul id="MobileNav" class="mobile-nav">
  <li class="mobile-nav__item">
    <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false">
      <span class="mobile-nav__label">Link Level 1 - 1</span>
    </button>
    <ul class="mobile-nav__dropdown" data-level="2">
      <li class="mobile-nav__item">
        <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false">
          <span class="mobile-nav__label">Link Level 2 - 1</span>
        </button>
        <ul class="mobile-nav__dropdown" data-level="3">
          <li class="mobile-nav__item">
            <a href="/" class="mobile-nav__sublist-link">
              <span class="mobile-nav__label">Link Level 3 - 1</span>
            </a>
          </li>
        </ul>     
      </li>
    </ul>
  </li>
  <li class="mobile-nav__item">
    <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false">
      <span class="mobile-nav__label">Link Level 1 - 2</span>
    </button>
    <ul class="mobile-nav__dropdown" data-level="2">
      <li class="mobile-nav__item">
        <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false">
          <span class="mobile-nav__label">Link Level 2 - 1</span>
        </button>
        <ul class="mobile-nav__dropdown" data-level="3">
          <li class="mobile-nav__item">
            <a href="/" class="mobile-nav__sublist-link">
              <span class="mobile-nav__label">Link Level 3 - 1</span>
            </a>
          </li>
          <li class="mobile-nav__item">
            <a href="/" class="mobile-nav__sublist-link">
              <span class="mobile-nav__label">Link Level 3 - 2</span>
            </a>
          </li>
          <li class="mobile-nav__item">
            <a href="/" class="mobile-nav__sublist-link">
              <span class="mobile-nav__label">Link Level 3 - 3</span>
            </a>
          </li>
        </ul>     
      </li>
      <li class="mobile-nav__item">
        <a href="/" class="mobile-nav__sublist-link">
          <span class="mobile-nav__label">Link Level 2 - 2</span>
        </a>
      </li>
      <li class="mobile-nav__item">
        <a href="/" class="mobile-nav__sublist-link">
          <span class="mobile-nav__label">Link Level 2 - 3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

JS:

var accordion_head  = $('.js-toggle-submenu'),
accordion_body  = $('.mobile-nav__dropdown');

accordion_head.on('click', function(event) {
  event.preventDefault();

  if ($(this).hasClass('active')) {
    accordion_body.slideUp('normal');
    accordion_head.removeClass('active');
  } else {
    accordion_body.slideUp('normal');
    $(this).next().stop(true,true).slideToggle('normal');
    accordion_head.removeClass('active');
    $(this).addClass('active');
  }
});

Answer 1

You can make your dropdown working to any nested level. You are expanding your menu using condition to check active class which is not required. Toggle active class and slideUp or slideDown with only one line code .

Here is the Demo

 jQuery(document).ready(function($) { var accordion_head = $('.js-toggle-submenu'); accordion_head.on('click', function(event) { event.preventDefault(); if($(this).hasClass('active')){ $(this).next('.mobile-nav__dropdown').find('.active').removeClass('active').next('.mobile-nav__dropdown').slideUp('normal'); } $(this).parent('li').siblings('li').find('.active').removeClass('active').next('.mobile-nav__dropdown').slideUp('normal'); $(this).stop().toggleClass('active').next('.mobile-nav__dropdown').stop().slideToggle('normal'); }); });

 .mobile-nav__dropdown { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="MobileNav" class="mobile-nav"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">Link Level 1 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="2"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false"> <span class="mobile-nav__label">Link Level 2 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="3"> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 1</span> </a> </li> </ul> </li> </ul> </li> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">Link Level 1 - 2</span> </button> <ul class="mobile-nav__dropdown" data-level="2"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false"> <span class="mobile-nav__label">Link Level 2 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="3"> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 1</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 2</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 3</span> </a> </li> </ul> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 2 - 2</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 2 - 3</span> </a> </li> </ul> </li> </ul>

Answer 2

This is a slightly different approach - expand immediate children using - accordion_body = accordion_head.children('.mobile-nav__dropdown');

The updated jsfiddle is - https://jsfiddle.net/ybemnfpk/