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:


  
    
    
      
        
        
          
            
              Link Level 3 - 1
            
          
             
      
    
  
  
    
    
      
        
        
          
            
              Link Level 3 - 1
            
          
          
            
              Link Level 3 - 2
            
          
          
            
              Link Level 3 - 3
            
          
             
      
      
        
          Link Level 2 - 2
        
      
      
        
          Link Level 2 - 3

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');
  }
});

Asfan Shaikh · Accepted Answer

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



  
    
    
      
        
        
          
            
              Link Level 3 - 1
            
          
             
      
    
  
  
    
    
      
        
        
          
            
              Link Level 3 - 1
            
          
          
            
              Link Level 3 - 2
            
          
          
            
              Link Level 3 - 3
            
          
             
      
      
        
          Link Level 2 - 2
        
      
      
        
          Link Level 2 - 3

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

Answers (2)

Related Questions