Hide all collapsable divs on 'hamburger' menu click

Question

I have a Bootstrap navbar. clicking on the hamburger icon will open a menu. One of the menu item is a button for another collapsable div. i added this to this button:

$('.nav a').on('click', function(){
     $(".navbar-toggle").click() 
});

This will close the navbar menu and will show another div.

What i want is clicking on the hamburger icon again will CLOSE the new div and will NOT open the menu.

Basically what is need is the navbar-toggle to close all collapsable div and will open the menu only if there isn't any other div open.

This is my example: http://www.bootply.com/FqZYHFSWrh

Scroll down to get 770px page width click on login, you will see that the menu disappear. The next click on the hamburger icon i want to close the login container. The second click (after the login container is close) i want to open the menu again.

jme11 jme11 · Accepted Answer · 2014-10-07T02:42:14

You could add an event handler such as:

$('button.navbar-toggle').on('click', function(event){
  if ($('.login-collapse').hasClass('in')) {
    event.stopPropagation();
    $('.login-collapse').collapse('hide');
  }
});

Hide all collapsable divs on 'hamburger' menu click

1 Answers