Expand & Collapse All

[softelos]

I'm trying to add a button that expands or collapses all the first level <li> tags in the menu (I'm giving them class first to easily locate them). I can get the menu expanding and collapsing, however with the following issues:

• After expanding, if I click on the menus with the mouse they don't collapse, it's like the JavaScript behind doesn't respond.
• After collapsing, if I click on the menus, this time they do expand, however they start overlapping each other like if the HTML was broken. The only solution is to reload the page.

Can you please check if I'm doing it properly? here is my code, where dashboard-sidebar-expand is the ID of the button that is pressed, dashboard-sidebar-menu is the menu ID, and the glyphicon thing is just to control the picture shown on the button:

$('#dashboard-sidebar-expand').on('click',function(){
    $(this).children('.glyphicon').toggleClass('glyphicon-resize-full glyphicon-resize-small');
    $('#dashboard-sidebar-menu li.first').toggleClass('active');
    $('#dashboard-sidebar-menu li.first ul:first').toggleClass('collapse');
});

Thanks.

[jd19007]

I use this in my code for mine side menu I have and thought I would share this.

html -

jquery - $(document).ready(function() { $(".custom-search-form input[type=text]").keyup(function(e) { var valThis = $(this).val(); $("#side-menu a").each(function() { if($(this).html().search(new RegExp(valThis, 'ig')) < 0 && valThis.length > 0) { if($(this).parent('li').length > 0) { $(this).hide(); } else { $(this).hide(); } } else if(valThis.length > 0) { $(this).show().addClass('active').parent().parent().addClass('in').parent().children('a.active').show(); } else { $(this).show().removeClass('active').parent().parent().removeClass('in').parent(); } }); }); });

maybe will fix this