A Secondary Step to Our Previous Tutorial
It is important to note that we have another tutorial about How To Collapse Divi Mobile menu Submenus, and that tutorial is required first as a prerequisite for this one. This additional feature was requested by many and is the only solution for this in the Divi community, so we are excited to show you how to collapse Divi mobile menu submenus when another one is clicked opened!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
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!
Here is the setting when using our plugin, it doesn’t get easier than this!
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!
Hi Flow!
Can you please share the URL of the page to check further?
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);
});
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!
Thank you for bringing the issue to our attention. We will look into it and update the guide soon.
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?
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);
});
Hi Patrick!
Thank you for bringing the issue to our attention. We will look into it and update the guide soon.
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
Hi Azim!
Thank you for bringing the issue to our attention. We will look into it and update the guide soon.
Hi Oleg!
Our developers are working on the issue. About the menu, can you please share the URL of the page to check further?
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