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

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<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 Nov 15, 2022 @ 3:22 pm

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

2 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

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart