Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

267
Views
Burger menu - toggle element itself and toggle other elements excluding each other

I have a multilevel burger menu. Codepen, tried to make it similar,but without fonts and icons

Now there can be opened many submenus and subsubmenus. The owner asked to make only one active - one sub and one subsub item inside.

The original script is simple(yes. closest and siblings didn't work).

jQuery('ul#burger-menu span.fa-open').on('click', function() {
  jQuery(this).toggleClass('rotate');
  jQuery(this).parent('li').children('ul.sub-menu').slideToggle();  
});    

Clicking the arrow -it rotates - the current item opens and closes by click(because of toggle, like it has to be).

If I need to open only one, I should toggle the 'd-block' class only for active item and to delete it for others. I try that way, and when I open the item - all others are closing, like it has to be, but I cant't toggle the opened item itself. It can be closed only if I open another one item. I tried to give a new class to all opened items and to make the term to remove added classes if fa-open is in li with this new class.
How to fix all that?

jQuery('ul#burger-menu>li>span.fa-open').on('click',function() {
 jQuery('ul#burger-menu>li>span.fa-open').removeClass('rotate');    
  jQuery(this).toggleClass('rotate');
  jQuery('ul.sub').removeClass('d-block');      
  jQuery(this).parent('li').children('ul.sub').toggleClass('d-block');
 /* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');      
  jQuery(this).parent('li').addClass('opened-burger-item'); */      
}); 

    
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').on('click',function() {
jQuery('ul#burger-menu li>ul.sub>li>span.fa-open').removeClass('rotate');
  jQuery(this).toggleClass('rotate');
  jQuery('ul.subsub').removeClass('d-block');   
  jQuery(this).parent('li').children('ul.subsub').toggleClass('d-block');
   /* jQuery('ul#burger-menu>li').removeClass('opened-burger-item');    
  jQuery(this).parent('li').addClass('opened-burger-item'); */  
});

The opened item has to close others and has to toggle itself by click, I don't understand why they conflict.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!