Jonah M Jonah M - 6 months ago 3x
Javascript Question

Bootstrap Collapse.js Switch Hide/Show for menu

Having trouble with bootstraps collapse. I have 2 menu items, with a dropdown collapse. I'm trying to alternate/switch them so I DONT get to see both at the same time. I've tried using

but that does't seem to be working with bootstrap.

Please see the codepen for a working demonstration. Currently am using
tags to create the functionality.

I'm wondering whether the DOM treats the collapse functionality as 2 separate things and therefore doesn't correlate them together.

So I have

<div class="search-bar>...</div>
<div class="collapse" id="collapseExample">...</div>
<div class="collapse" id="collapseFilter">...</div>

Inside the search bar I have 2 anchor elements which trigger the collapse. And then a non-related drop-down.

<a id="search-button" data-toggle="collapse" href="#collapseExample">
<span class="icon-search"></span>Search
</a> <!--Simplified -->

So I'm not sure why BOTH dropdown collapse elements come down. I want it to work just like the accordion style

Thanks in advance.


You can force hiding other menu like this:

$("#search-button").click(function() {

$("#filter-button").click(function() {

See JsFiddle of your demonstration. I hope it helps, Thanks