title: Bootstrap 5 Accordion is not working properly when placed in collapsed div
body: <p>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:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link href=https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"&gt;
  
    &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar fixed-top navbar-light bg-light header-nav"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse-header-nav" role="button" aria-expanded="false" aria-controls="collapse-header-nav"&gt;
      Drop-Down
    &lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div class="collapse w-100" id="collapse-header-nav"&gt;
        &lt;div class="card card-body"&gt;
  
  
          &lt;div class="accordion" id="accordionExample"&gt;
            &lt;div class="accordion-item"&gt;
              &lt;h2 class="accordion-header" id="headingOne"&gt;
                &lt;button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
          Accordion Item #1
        &lt;/button&gt;
              &lt;/h2&gt;
              &lt;div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"&gt;
                &lt;div class="accordion-body"&gt;
   &lt;strong&gt;TItem 1 content.&lt;/strong&gt; 
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="accordion-item"&gt;
              &lt;h2 class="accordion-header" id="headingTwo"&gt;
                &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
          Accordion Item #2
        &lt;/button&gt;
              &lt;/h2&gt;
              &lt;div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"&gt;
                &lt;div class="accordion-body"&gt;
   &lt;strong&gt;TItem 2 content.&lt;/strong&gt; 
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="accordion-item"&gt;
              &lt;h2 class="accordion-header" id="headingThree"&gt;
                &lt;button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
          Accordion Item #3
        &lt;/button&gt;
              &lt;/h2&gt;
              &lt;div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"&gt;
                &lt;div class="accordion-body"&gt;
                  &lt;strong&gt;TItem 3 content.&lt;/strong&gt; 
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/nav&gt;
    &lt;nav class="navbar fixed-bottom navbar-light bg-light footer-nav"&gt;
  
  
      &lt;script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js referrerpolicy="no-referrer"&gt;&lt;/script&gt;
      &lt;script src=https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src=https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>