close the opened accordion menu when second accordion menu is clicked, bootstrap

Question

I have two icons on a mobile view for my site. One is search icon and the other one is menu icon. Both are using bootstrap accordion to show and hide the search options and menu options.

Accordion is working as it is supposed to.

But the problem is when one menu is open and if you click on the second menu, they both stay opened. Ideally it should close the first menu if you click the second menu or vice versa.

Here is my code for two menus:

<button class="mobile-search navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#nav-search">
            <span class="sr-only">Toggle navigation</span>
            <i class="fa fa-search"></i>
</button>

<button class="navbar-toggle mobile-menu col-sm-1" type="button" data-toggle="collapse" data-target="#channel-list-mobile">
            <span class="sr-only">Toggle navigation</span>
            <img alt="Channel List Icon" class="img-responsive" src="/Images/ui/channel-list.png">
</button>

And the search menu options goes like this ( just an example ) :

<div class="collapse" id="nav-search">
<div class="row">
    <div class="col-xs-12">
        <div id="inline-search">
            <div class="search-type">
                <div class="row">
                    <label for="search-buy" class="radio-inline col-xs-6 inline-labels">
                        @Html.RadioButton("propertyType", 1, Shared.SearchCriteria.SaleProducts, new { id = "1" }) <span>Buy</span>
                    </label>
                    <label class="radio-inline rent-mobile col-xs-6 inline-labels">
                        @Html.RadioButton("propertyType", 0, !Shared.SearchCriteria.SaleProducts, new { id = "2" }) <span>Rent</span>
                    </label>
               </div>
          </div>
       </div>
    </div>
</div>

The menu options code:

    <nav class="visible-xs collapse" id="mobile-nav-accordion">
        <div class="panel-group" id="mobile-menu">
            <div id="channel-list-mobile" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                               home
                            </h4>
                        </div>
                    </div>
                    <!--nested accordion-->
                    <div id="mobile-menu-list" class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#mobile-menu-list" href="#services-mobile">
                                    Services <i class="fa fa-caret-down pull-right"></i>
                                </a>
                            </h4>
                        </div>
                        <div id="services-mobile" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul class="mobile-nav">

                                        <li>
                                            <a href="@Url">test...</a>
                                        </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</nav>

The above code is just to show the bootstrap structure i am using.

So any idea on how to close the first menu if you click the second menu or vice versa??

Answer 1

If i were you, i would try to merge the default accordion template with your existing code as there is alot of chunks missing from your code.

Also you should use both of these to control which tabs are open/closed

class="panel-collapse collapse">
class="panel-collapse collapse in">

Collapse in = Currently open
Collapse = Closed

Answer 2

Got it fixed using javascript.

Added id's for the buttons:

<button id="mobile-search-button" class="mobile-search navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#nav-search">
            <span class="sr-only">Toggle navigation</span>
            <i class="fa fa-search"></i>
</button>


<button id="mobile-menu-button" class="mobile-menu navbar-toggle col-sm-1" type="button" data-toggle="collapse" data-target="#channel-list-mobile">
            <span class="sr-only">Toggle navigation</span>
            <img alt="Channel List Icon" class="img-responsive" src="/Images/ui/channel-list.png">
</button>

And here is the javascript fix:

var lastaccordion = null;
$('#mobile-search-button').click(function () {
    if (lastaccordion != null) {
        if (lastaccordion.attr('id') != 'nav-search') {
            lastaccordion.collapse('hide');
        }
    }
    lastaccordion = $('#nav-search');
});

$('#mobile-menu-button').click(function () {
    if (lastaccordion != null) {
        if (lastaccordion.attr('id') != 'channel-list-mobile') {
            lastaccordion.collapse('hide');
        }
    }
    lastaccordion = $('#channel-list-mobile');
});