In this tutorial I share the code to automatically collapse menu items in WordPress custom menu widgets having sub items using jQuery Collapse. We will add a down arrow Dashicons icon font in the closed state and up arrow when the menu items (having sub items) are open. Clicking the down arrow or the menu item smoothly expands it to reveal its children and clicking the menu item or up arrow will smoothly close it.
Sample screenshots below.
Before:
After:
When "Open an Account" menu item is clicked:
When "Alternative Assets" menu item is clicked:
With all parent menu items clicked:
Step 1
Upload jquery.collapse.js to your child theme's js directory (create if not existing).
Step 2
Create a file named say, jquery.collapse.init.js in the same location having the following:
