So I'm trying to have multiple dropdowns menu on mobile, the dropdown content does appear however it doesn't show simultaneously like if I open one then open another one it should close the first one.
https://jsfiddle.net/4w2835o1/
<div class="container">
<div class="navbar navbar-fixed-top" role="navigation">
<ul class="mobile-nav">
<li>
<a href="#" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="true">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<li> </li>
<li><a href="#"><i class="fa fa-language" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i></a></li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Jobs</a></li>
<li><a href="#">Career advice</a></li>
<li><a href="#">Career advice</a></li>
</ul>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-2" aria-expanded="true">
<form class="navbar-form navbar-left" role="search"> <div class="form-group">
<input type="text" class="form-control" placeholder="Search"> </div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
