CODEWITHSUNDEEP
twitter-bootstrapbootstrap-5
Behseini
Behseini

Reputation: 6330

Bootstrap 5 Accordion is not working properly when placed in collapsed div

I am working on the below code. Why is the Accordion not working properly when placed in collapsed div? As you can see opening Accordion #2 is not closing previously opened accordion:

<!doctype html>
<html lang="en">

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

  <!-- Bootstrap CSS -->
  <link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar fixed-top navbar-light bg-light header-nav">
    <div class="container-fluid">
      <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse-header-nav" role="button" aria-expanded="false" aria-controls="collapse-header-nav">
    Drop-Down
  </a>

    </div>
    <div class="collapse w-100" id="collapse-header-nav">
      <div class="card card-body">


        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="accordion-body">
 <strong>TItem 1 content.</strong> 
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="accordion-body">
 <strong>TItem 2 content.</strong> 
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>TItem 3 content.</strong> 
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>
  <nav class="navbar fixed-bottom navbar-light bg-light footer-nav">


    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js referrerpolicy="no-referrer"></script>
    <script src=https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 1

Views: 17826

Answers (2)

Sanu Mondal
Sanu Mondal

Reputation: 31

You have not included the proper cdn link of Javascript for bootstrap 5. This is the proper js cdn link of bootstrap 5

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Or

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Upvotes: 3

Arleigh Hix
Arleigh Hix

Reputation: 10897

Your accordion markup alone is valid and functional as long as it is not a descendant of a .collapse element. One solution would be to implement your own collapse function on the parent collapse. In the basic example below I use .d-none and $().toggleClass(). If you want animation see my fiddle using $().slideToggle.

$(document).ready(() => {
  const $ddBtn = $('.my-jquery-collapse')
  const $dd = $($ddBtn.data('my-target'))
  $ddBtn.on('click', () => {
    $dd.toggleClass('d-none')
  })
})
<!doctype html>
<html lang="en">

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

  <!-- Bootstrap CSS -->
  <link href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <nav class="navbar fixed-top navbar-light bg-light header-nav">
    <div class="container-fluid">
      <a class="my-jquery-collapse btn btn-primary" data-my-target="#collapse-header-nav" role="button" aria-expanded="false" aria-controls="collapse-header-nav">
    Drop-Down
  </a>

    </div>
    <div class="d-none w-100" id="collapse-header-nav">
      <div class="card card-body">


        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>TItem 1 content.</strong>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>TItem 2 content.</strong>
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
            </h2>
            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                <strong>TItem 3 content.</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>
  <nav class="navbar fixed-bottom navbar-light bg-light footer-nav">


    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js referrerpolicy="no-referrer"></script>
    <script src=https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 1

Related Questions