Sridhar Katakam

Genesis and WordPress Tutorials

Using jQuery Collapse to automatically add collapse/expand functionality in Custom Menu widget

by 5 Comments

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:

custom-menu-before-jquery-collapse

After:

custom-menu-after-jquery-collapse1

When "Open an Account" menu item is clicked:

custom-menu-after-jquery-collapse2

When "Alternative Assets" menu item is clicked:

custom-menu-after-jquery-collaps3

With all parent menu items clicked:

custom-menu-after-jquery-collaps4

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hey Sri,

    I am trying to implement this on a Dynamik site, but it is not working. Eric recommends using

    “`add_action( ‘wp_enqueue_scripts’, ‘custom_enqueue_scripts’ );
    function custom_enqueue_scripts()
    {
    wp_enqueue_script( ‘my-scripts’, dynamik_get_stylesheet_location( ‘url’ ) . ‘my-scripts.js’, array( ‘jquery’ ), CHILD_THEME_VERSION, true );
    }“`

    I am not able to properly call the javascript files because I cannot get the collapse behavior working. What would be the best way to adjust this code for Dynamik?

    Thanks so much!

    Bodie

    Reply
    • >