CODEWITHSUNDEEP
htmljquerybootstrap-4
Zeryab Hassan Kiani
Zeryab Hassan Kiani

Reputation: 486

Closing dropdown menu while opening another one in bootstrap

I have two dropdown menus residential and utility. When I click residential to open, it remains open but when I click utility, I want residential to close automatically.

Following is my code

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <li class="active dropright">
        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
            <i class="fas fa-home"></i>
            Residential
        </a>
        <ul class="collapse list-unstyled" id="homeSubmenu">
            <li>
                <a href="#">Rami Villa</a>
            </li>
            <li>
                <a href="#">Alpine Metals Jafza</a>
            </li>
            <li>
                <a href="#">Home 3</a>
            </li>
        </ul>
    </li>

    <li class="active dropright">
        <a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
            <i class="fas fa-home"></i>
            Utility
        </a>
        <ul class="collapse list-unstyled" id="utilitySubmenu">
            <li>
                <a href="#">Future Pipes</a>
            </li>
            <li>
                <a href="#">Future Scaffolding</a>
            </li>
            <li>
                <a href="#">Future Electricity</a>
            </li>
        </ul>
    </li>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  </body>
</html>

At the moment the output is like this.

Both dropdowns open at the same time

Actually I want it like this.

When I open second first one should be closed

Upvotes: 1

Views: 2480

Answers (5)

nano dev
nano dev

Reputation: 433

I have made some changes in your code, try this, hope this will work for you.

<div id="accordion">
                <li class="active dropright">
                <button class="btn btn-link" data-toggle="collapse" data-target="#homeSubmenu" aria-expanded="true" aria-controls="collapseOne">
                  residential
                </button>
                <ul class="collapse list-unstyled" id="homeSubmenu" data-parent="#accordion">
                    <li>
                        <a href="#">Rami Villa</a>
                    </li>
                    <li>
                        <a href="#">Alpine Metals Jafza</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
            </li>

            <li class="active dropright">
                <button class="btn btn-link" data-toggle="collapse" data-target="#utilitySubmenu" aria-expanded="true" aria-controls="collapseOne">
                  Utility
                </button>
                <ul class="collapse list-unstyled" id="utilitySubmenu" data-parent="#accordion">
                    <li>
                        <a href="#">Future Pipes</a>
                    </li>
                    <li>
                        <a href="#">Future Scaffolding</a>
                    </li>
                    <li>
                        <a href="#">Future Electricity</a>
                    </li>
                </ul>
            </li>
        </div>

Upvotes: 1

NAS
NAS

Reputation: 331

here is the code without jquery. it's only with bootstrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
          
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="homeSubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Residential
        </a>
        <div class="dropdown-menu" aria-labelledby="homeSubmenu">
          <a class="dropdown-item" href="#">Rami Villa</a>
          <a class="dropdown-item" href="#">Alpine Metals Jafza</a>         
          <a class="dropdown-item" href="#">Home 3</a>
        </div>
      </li>
      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="utilitySubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Utility
        </a>
        <div class="dropdown-menu" aria-labelledby="utilitySubmenu">
          <a class="dropdown-item" href="#">Future Pipes</a>
          <a class="dropdown-item" href="#">Future Scaffolding</a>         
          <a class="dropdown-item" href="#">Future Electricity</a>
        </div>
      </li>
      
    </ul>
    
  </div>
</nav>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

To make a collapse effect use this jquery code. This code removes class show by method removeClass().

Also, wrap the topmost <li> tag in the <ul> tag. Otherwise, this html is not valid.

$(".dropdown-toggle").on("click", function () {
    $(".collapse.show").removeClass("show");
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<body>
    <ul>
        <li class="active dropright">
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
                <i class="fas fa-home"></i>
                Residential
            </a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li>
                    <a href="#">Rami Villa</a>
                </li>
                <li>
                    <a href="#">Alpine Metals Jafza</a>
                </li>
                <li>
                    <a href="#">Home 3</a>
                </li>
            </ul>
        </li>

        <li class="active dropright">
            <a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
                <i class="fas fa-home"></i>
                Utility
            </a>
            <ul class="collapse list-unstyled" id="utilitySubmenu">
                <li>
                    <a href="#">Future Pipes</a>
                </li>
                <li>
                    <a href="#">Future Scaffolding</a>
                </li>
                <li>
                    <a href="#">Future Electricity</a>
                </li>
            </ul>
        </li>
    </ul>
</body>

Upvotes: 1

Swati
Swati

Reputation: 28522

You can use .not() method to exclude the dropdown-toggle which clicked and then using same remove class and add attr to elements .

Demo Code :

//onclick of dropdown 
$(".dropdown-toggle").on("click", function() {
  //change attr of other..
  $(".dropdown-toggle").not(this).attr("aria-expanded", "false")
  //addclass of other..
  $(".dropdown-toggle").not(this).addClass("collapsed")
  //remove show class from others
  $(".list-unstyled").not($(this).next("ul")).removeClass("show")
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js"></script>
<ul>
  <li class="active dropright">
    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
      <i class="fas fa-home"></i> Residential
    </a>
    <ul class="collapse list-unstyled" id="homeSubmenu">
      <li>
        <a href="#">Rami Villa</a>
      </li>
      <li>
        <a href="#">Alpine Metals Jafza</a>
      </li>
      <li>
        <a href="#">Home 3</a>
      </li>
    </ul>
  </li>

  <li class="active dropright">
    <a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
      <i class="fas fa-home"></i> Utility
    </a>
    <ul class="collapse list-unstyled" id="utilitySubmenu">
      <li>
        <a href="#">Future Pipes</a>
      </li>
      <li>
        <a href="#">Future Scaffolding</a>
      </li>
      <li>
        <a href="#">Future Electricity</a>
      </li>
    </ul>
  </li>
  <li class="active dropright">
    <a href="#utilitySubmenu2" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
      <i class="fas fa-home"></i> Utilit4y
    </a>
    <ul class="collapse list-unstyled" id="utilitySubmenu2">
      <li>
        <a href="#">Future Pipes2</a>
      </li>
      <li>
        <a href="#">Future Scaffo2lding</a>
      </li>
      <li>
        <a href="#">Future Electri2city</a>
      </li>
    </ul>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Upvotes: 0

Orman Faghihi Mohaddes
Orman Faghihi Mohaddes

Reputation: 226

I write a code hope it works for you:

$('.dropdowns').on('show.bs.dropdown', function () {
    var currentDropdown = $(this);
    $('.dropdowns').each(function () {
        if($(this) !== currentDropdown && $(this).hasClass('open')) {
            $(this).dropdown('toggle')
        }
    })
})

Upvotes: 0

Related Questions