How To Collapse Other Divi Mobile Menu Submenus When Another One Is Opened Tutorial by Pee Aye Creative

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

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

FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!

Divi Responsive Helper by Pee Aye Creative 2.3

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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 by Pee Aye Creative 2.3

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

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

  1. 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
      • 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

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

  2. 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
    • Hemant Gaba

      Hi Patrick!

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

      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

Submit a Comment

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

Recent Posts

0

Your Cart