Snippet / Theme Options > Integration for JavaScript and Theme Options > Custom CSS for styles
Collapsible Mobile Submenu Arrow
Turns always-open Divi mobile submenu items into expandable parent rows with a visible toggle control.
Use this when a Divi mobile menu has several nested items and the default expanded list is too tall. Add the script after jQuery is available.
<script>
jQuery(function ($) {
$(".et_mobile_menu .menu-item-has-children > a").each(function () {
var $link = $(this);
var label = $.trim($link.text()) || "submenu";
var $toggle = $("<button class='dfy-submenu-toggle' type='button' aria-expanded='false'></button>");
$toggle.attr("aria-label", "Toggle " + label + " submenu");
$link.after($toggle);
});
$(".et_mobile_menu").on("click", ".dfy-submenu-toggle", function () {
var $button = $(this);
var isOpen = $button.attr("aria-expanded") === "true";
$button.attr("aria-expanded", String(!isOpen));
$button.closest(".menu-item-has-children").toggleClass("is-submenu-open", !isOpen);
});
});
</script>.et_mobile_menu .menu-item-has-children {
position: relative;
}
.et_mobile_menu .menu-item-has-children > .sub-menu {
display: none;
}
.et_mobile_menu .menu-item-has-children.is-submenu-open > .sub-menu {
display: block;
}
.dfy-submenu-toggle {
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
cursor: pointer;
}
.dfy-submenu-toggle::before {
content: "+";
font-size: 22px;
line-height: 1;
}
.dfy-submenu-toggle[aria-expanded="true"]::before {
content: "-";
}Notes
- Test with parent menu items that also have their own URL.
- If the theme already injects submenu toggles, do not stack this on top of them.