Как сделать чтобы при открытии второго меню первое меню закрывалось?

Question

[FRC_Volen]

Добрый день,
как мне сделать чтобы при открытии второго меню первое меню закрывалось
т.е. чтобы только одно меню могло быть открытым?


Смотреть мобильную версию (ширина экрана до 767px)
Тут оригинал

Я так понимаю решается все при помощи JS, но как?

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav3" aria-expanded="true" id="small_menu1">
	<div class="container">
		<div class="row">
			<div>
				<span class="sr-only">Меню</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</div>
			<div>
				<p>Меню</p>
			</div>
		</div>
	</div>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav4" aria-expanded="true" id="small_menu1">
	<div class="container">
		<div class="row">
			<div>
				<span class="sr-only">Услуги</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</div>
			<div>
				<p>Услуги</p>
			</div>
		</div>
	</div>
</button>

<div class="navbar-collapse collapse in" id="topnav3" aria-expanded="true">
	<ul id="small-menu-decoration" class="nav navbar-nav top-menu">
		<li class="menu-item">
			<a href="#">Главная</a>
		</li>      	
		<li class="menu-item">
			<a href="#">Главная</a>
		</li>      	
	</ul>
</div>
<div class="navbar-collapse collapse in" id="topnav4" aria-expanded="true">
	<ul id="small-menu-decoration" class="nav navbar-nav top-menu">
		<li class="menu-item">
			<a href="#">Главная</a>
		</li>      	
		<li class="menu-item">
			<a href="#">Главная</a>
		</li>      	
	</ul>
</div>

Answer 1

[FRC_Volen]

А вот и ответ
var $navbarLeft = $('#topnav3');
var $navbarRight = $('#topnav4');

$navbarLeft.on('show.bs.collapse', function () {
if ($navbarRight.hasClass('in')) {
$navbarRight.insertAfter($(this)).collapse('hide');
}
})
$navbarRight.on('show.bs.collapse', function () {
if ($navbarLeft.hasClass('in')) {
$navbarLeft.insertAfter($(this)).collapse('hide');
}
})