Is there a way to toggle submenus? My implementation isn't working...

[Arpan Ghosh]

I want to be able to click my submenus and have them toggle and display whatever children objects exist in the parent menus. I'm not sure if there's a surefire way to do this within changing it in the .js itself. I found a similar thread, #13, but I don't have a section "slidebar submenus" in my js of slidebars.

I feel like I want to do something like this:

// ------------------
// Slidebars Submenus

    $('.sb-toggle-submenu').off('click') // Stop submenu toggle from closing Slidebars.
    .on('click', function() {
        $submenu = $(this).parent().children('.sb-submenu');
        $(this).add($submenu).toggleClass('sb-submenu-active'); // Toggle active class.

        if ($submenu.hasClass('sb-submenu-active')) {
            $submenu.slideDown(200);
        } else {
            $submenu.slideUp(200);
        }
    });

But when I paste it into my slidebar.js and change my CSS/HTML to call the submenu change, I don't see a change. Can anyone help me figure out where I'm going wrong?

[Jory Hogeveen]

Not sure if this is related to off canvas sidebar functionality which Slidebars provides (even if your menu resides within a Slidebar).
Anyhow!

$(this).add($submenu).toggleClass('sb-submenu-active');

It looks like you should change that line to this:

var $submenu.toggleClass('sb-submenu-active');

Notice the var part in the beginning. I find it always a good practice to declare such a variable as a local variable within the anonymous function if it only has to do somethinig within that function.

[Arpan Ghosh]

Thanks for the help!