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 1Upload jquery.collapse.js to your child theme's
jsdirectory (create if not existing).
Step 2Create a file named say, jquery.collapse.init.js in the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.