CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
epus
epus

Reputation: 139

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 :)

Upvotes: 0

Views: 1602

Answers (3)

Lorenzo Magon
Lorenzo Magon

Reputation: 544

You can use the method .collapse() already available in Bootstrap to hide the menu not involved.

Update the html code to this:

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

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

Then add the js code in separate file:

$(function()
{
    $('#navbarSearchButton').on ('click', function() {  $('#navbarMenu').collapse('hide'); });
    $('#navbarMenuButton').on ('click', function() { $('#navbarSearch').collapse('hide'); });
});

Upvotes: 0

runningviolent
runningviolent

Reputation: 317

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>

Upvotes: 1

EricBellDesigns
EricBellDesigns

Reputation: 965

You need to differentiate the data-target attribute with a unique class or id for your dropdown menus like so:

For your first menu

<a class="btn btn-navbar" data-toggle="collapse" data-target="#first">

For your second menu:

<a class="btn btn-navbar" data-toggle="collapse" data-target="#second">

Then you can add that unique id to your nav collapse container:

First

<div id="first" class="nav-collapse"> ... </div>

Second

<div id="second" class="nav-collapse"> ... </div>

Upvotes: 0

Related Questions