Can Bootstrap 4 navbar toggler button, close previously opened menu before opening another one?

user_14686340 0
Viewed 180

I have a Bootstrap 4 navbar with two collapsable menus (id "links" & id "account"). I would like it to be impossible for two menus to be open at the same time. So, e.g. if the "links" menu is already open, clicking on the "account" toggler will close the "links" menu before opening the "account" menu. Does anyone know how to accomplish this? Here's the code I have:

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <div class="container">
    
        <a class="navbar-brand mb-1 flex-grow-0" href="#">
            site_name<span class="d-none d-md-inline ml-4">|</span>
        </a>
        
        <!-- links toggle -->
        <button class="navbar-toggler border-0 order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>

        <!-- account toggle -->
        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-user"></i>
        </button>

        <div class="collapse navbar-collapse justify-content-start" style="flex-grow: 1;" id="links">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Opinion</a>
                </li>
            </ul>
        </div>
        
       <div class="collapse navbar-collapse justify-content-end" style="flex-grow: 0;" id="account">
            <ul class="navbar-nav justify-content-end text-right">
                <li class="nav-item">
                    <a class="btn btn-primary mb-3" href="{path='account/registration'}">Join</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-secondary mt-2 mb-3" data-toggle="modal" href="#loginModal" aria-expanded="false" aria-controls="loginModal">Log in</a>
                </li>
            </ul>
        </div>
        
    </div>
</nav>
bootstrap-4
1 Answers

The data-target attribute accepts a comma separated list of CSS selectors. Therefore, you can add another selector like .navbar-collapse.show to toggle the other menus that are currently open...

https://codeply.com/p/vavTw6D8Zl

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand mb-1 flex-grow-0" href="#"> site_name<span class="d-none d-md-inline ml-4">|</span>
        </a>
        <!-- links toggle -->
        <button class="navbar-toggler border-0 order-first" type="button" data-toggle="collapse" data-target="#links,.navbar-collapse.show" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>
        <!-- account toggle -->
        <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#account,.navbar-collapse.show" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-user"></i>
        </button>
        <div class="collapse navbar-collapse justify-content-start" style="flex-grow: 1;" id="links">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Opinion</a>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse justify-content-end" style="flex-grow: 0;" id="account">
            <ul class="navbar-nav justify-content-end text-right">
                <li class="nav-item">
                    <a class="btn btn-primary my-md-0 my-2" href="{path='account/registration'}">Join</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-secondary my-md-0 my-2" data-toggle="modal" href="#loginModal" aria-expanded="false" aria-controls="loginModal">Log in</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
user_1714560
Related