Bootstrap Collapse.js Switch Hide / Show for the menu

There was a problem with bootstraps crashing. I have 2 menu items with a drop down list. I am trying to alternate / switch them so that I cannot see both at the same time. I tried using 'toggle:false', but it doesn't seem to work with bootstrap.

For a working demo, see codepen . I am currently using tags data-to create functionality.

I wonder if the DOM considers collapse functionality as two separate things and therefore does not correlate them together.

So, I have a

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

In the search bar, I have 2 anchor elements that crash. And then an unrelated drop-down list.

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

, BOTH . , ,

.

+4
1

:

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

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

. JsFiddle . , ,

+2

All Articles