# Collapsible Submenus in the Divi Mobile Menu

> Folds submenus in Divi's mobile menu and adds a plus/minus button to open each one, so long menus no longer fill several screens on phones.

- Type: HTML
- Runs: Site-wide footer
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: divi, mobile-menu, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/divi-mobile-submenu-toggles/

## Code

```html
<style>
.et_mobile_menu .menu-item-has-children{position:relative;}
.et_mobile_menu .menu-item-has-children > .sub-menu{display:none!important;padding-left:0;}
.et_mobile_menu .menu-item-has-children.wpide-open > .sub-menu{display:block!important;}
.et_mobile_menu .menu-item-has-children > a{padding-right:56px;}
.wpide-divi-subtoggle{position:absolute;top:4px;right:4px;width:40px;height:40px;border:0;border-radius:4px;background:rgba(0,0,0,.05);font-size:20px;line-height:1;cursor:pointer;color:inherit;}
</style>
<script>
(function () {
    function setup(menu) {
        if (menu.getAttribute('data-wpide-toggles')) { return; }
        menu.setAttribute('data-wpide-toggles', '1');
        menu.querySelectorAll('.menu-item-has-children').forEach(function (item) {
            var button = document.createElement('button');
            button.type = 'button';
            button.className = 'wpide-divi-subtoggle';
            button.setAttribute('aria-expanded', 'false');
            button.setAttribute('aria-label', 'Show submenu');
            button.textContent = '+';
            button.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                var open = item.classList.toggle('wpide-open');
                button.setAttribute('aria-expanded', open ? 'true' : 'false');
                button.textContent = open ? '−' : '+';
            });
            item.insertBefore(button, item.querySelector('.sub-menu'));
        });
    }
    function scan() { document.querySelectorAll('.et_mobile_menu').forEach(setup); }
    window.addEventListener('load', scan);
    document.addEventListener('click', function (e) {
        if (e.target.closest && e.target.closest('.mobile_menu_bar, .mobile_nav')) { setTimeout(scan, 50); }
    });
})();
</script>
```

## Notes

Works with the default Divi header and the Divi Theme Builder menu module.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Collapsible Submenus in the Divi Mobile Menu" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/