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!
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!
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!
Here is the setting when using our plugin, it doesn’t get easier than this!
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.