Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Collapse Other Divi Mobile Menu Submenus When Another One Is Opened

Nelson Miller Profile Orange
In this tutorial I will show you how to collapse other Divi mobile menu submenus when another submenu is opened!

▶️ Please watch the video above to get all the exciting details! 👆

Add The Required JQuery

This tutorial will be quite short since it is like an addon for the previous tutorial. Only one step is required for this, and it is to copy the jQuery snippet below and placing it into your Divi website. I recommend placing it in the same location as the other jQuery used to collapse the mobile menus submenu, that way it will be nicely organized.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
	setTimeout(function(){
  jQuery(document).ready(function(){
jQuery('li.menu-item-has-children').click(function(){
if(jQuery('li.menu-item-has-children').hasClass('dt-open')){
		jQuery('li.menu-item-has-children').removeClass('dt-open');
		jQuery('li.menu-item-has-children .sub-menu').removeClass('visible');
		jQuery(this).addClass('dt-open');
		jQuery(this).find('.sub-menu').addClass('visible');
	}
	});
});
	},500);
</script>

After the code is placed, you can check your site and see the result. Simply toggle open one of the submenus, then toggle open another one, and the first one will close. Without this code, they both would be open, so adding this code is really good for user experinces, and I hope you enjoy it!

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper Plugin by Pee Aye Creative

Here is the setting when using our plugin, it doesn’t get easier than this!

Collapse Submenu When Another Is Opened menu setting in the Divi Responsive Helper 2.3

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

12 Comments

Comments By Others

  1. Flow

    Hi there, thank you for all the good tutorials. Same as everyone in the previous comments, the code isn’t working. My 2nd level submenu is expanded by default as well when opening the 1st level submenu.

    Did you find a solution?

    Thank you so much!

    Reply
    • Hemant Gaba

      Hi Flow!

      Can you please share the URL of the page to check further?

      Reply
  2. Apple aravind

    jQuery(document).ready(function(){
    setTimeout(function(){
    jQuery(‘li.menu-item-has-children’).click(function(){
    if(jQuery(‘li.menu-item-has-children’).hasClass(‘dt-open’)){
    jQuery(‘li.menu-item-has-children’).removeClass(‘dt-open’);
    jQuery(‘li.menu-item-has-children .sub-menu’).removeClass(‘visible’);
    jQuery(this).addClass(‘dt-open’);
    jQuery(this).find(‘.sub-menu’).addClass(‘visible’);
    }
    });
    }, 500);
    });

    Reply
  3. Simone

    Hi!

    I’m already using some of your menu guides to style my mobile menu on my website. However, same as someone else here, my 2nd level submenu is expanded by default as well when opening the 1st level submenu. Is there an additional code to fix this?

    Thanks!

    Reply
    • Hemant Gaba

      Thank you for bringing the issue to our attention. We will look into it and update the guide soon.

      Reply
  4. Patrick Sweede

    This script makes it impossible to collapse the 2 level menu, the 2nd level is expanded by default and can’t be collapsed 🙁

    Can you fix it?

    Reply
    • apple aravind

      jQuery(document).ready(function(){
      setTimeout(function(){
      jQuery(‘li.menu-item-has-children’).click(function(){
      if(jQuery(‘li.menu-item-has-children’).hasClass(‘dt-open’)){
      jQuery(‘li.menu-item-has-children’).removeClass(‘dt-open’);
      jQuery(‘li.menu-item-has-children .sub-menu’).removeClass(‘visible’);
      jQuery(this).addClass(‘dt-open’);
      jQuery(this).find(‘.sub-menu’).addClass(‘visible’);
      }
      });
      }, 500);
      });

      Reply
    • Hemant Gaba

      Hi Patrick!

      Thank you for bringing the issue to our attention. We will look into it and update the guide soon.

      Reply
  5. Azim Rizwan Quraishi

    Hey! I Love Your Tutorial
    But I am getting an issue after seeing your tutorial I implemented the collapse menu on mobile as well as someone click on the outside menu it will close the menu.
    so far so good but what the issue occurs is when I click inside the menu it will also close the menu. which I don’t want I just need when someone click outside the menu it will close

    Reply
    • Hemant Gaba

      Hi Azim!

      Thank you for bringing the issue to our attention. We will look into it and update the guide soon.

      Reply
      • Hemant Gaba

        Hi Oleg!

        Our developers are working on the issue. About the menu, can you please share the URL of the page to check further?

      • Oleg Ojo

        Hi there,

        Great job, love your tutorials.

        Is there an update on the issue addressed above?

        The Menu is broken after adding the Toggle code.

        Cheers

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart