undefined undefined - 10 months ago 70
Javascript Question

Bootstrap two responsive menus - collapse one menu when the other menu-button is clicked

There are two search-containers:

<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu"></div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu"></div>

The buttons to collapse this containers:

<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarSearch" </button>
<button class="b1" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarMenu" </button>

Is it possible (and how) as to hide one menu (if is open) when the other menu is clicked - and so open the second menu?

Currently when the navbarMenu is open and i'm gonna open the other menu all two menus are open... You know what I mean?

Thank you :)

Answer Source

I think that toggleClass() triggered by a click() event is what you are after.

$( document ).ready(function() {
	$( ".navbarSearch_button" ).click(function() {
		//alert( "Handler for button_1 called." );
		$( "#navbarSearch" ).toggleClass("navbar-collapse collapse")
	$( ".navbarMenu_button" ).click(function() {
		//alert( "Handler for navbarMenu_button called." );
		$( "#navbarMenu" ).toggleClass("navbar-collapse collapse")
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbarSearch" class="navbar-collapse collapse np-mobile-menu">lala</div>
<div id="navbarMenu" class="navbar-collapse collapse np-mobile-menu">mama</div>

<button class="b1 navbarSearch_button">navbarSearch</button>
<button class="b1 navbarMenu_button" >navbarMenu</button>