Jonah M Jonah M - 7 months ago 20
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

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

Please see the codepen for a working demonstration. Currently am using
data-
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.

Answer

You can force hiding other menu like this:

$("#search-button").click(function() {
    $('#collapseFilter').collapse('hide');
});

$("#filter-button").click(function() {
    $('#collapseExample').collapse('hide');
});

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

Comments