'Multiple Collapse Bootstrap

how do I close all the multicollapses when i open a new one? Specifically I want the "Accordion Item # 2.1" collapse when I click on "Accordion Item # 1 or" Accordion Item # 3. My code only closes "Accordion Item # 2" but not the accordion nested in it.

  <div class="accordion" id="accordionExample">  
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</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>This is the second item's accordion body.</strong> 
        <div class="accordion-item">
    <h2 class="accordion-header" id="hThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cThree" aria-expanded="false" aria-controls="cThree">
        Accordion Item #2.1
      </button>
    </h2>
    <div id="cThree" class="accordion-collapse collapse" aria-labelledby="hThree">
      <div class="accordion-body">
      CIAO
      </div>
    </div>
  </div>
      </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>This is the third item's accordion body.</strong> 
      </div>
    </div>
  </div>   
</div>
htmlcssaccordionbootstrap-5collapse


Solution 1:[1]

The only way to handle this is using Javascript. First, select all .collapse elements and then hook-up the hidden.bs.collapse event. As each accordion is hidden, look inside it for open child .collapse.show elements. For each open child, obtain the Bootstrap Collapse instance and use the hide() method.

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
    collapseEl.addEventListener('hidden.bs.collapse', function () {
        let children = this.querySelectorAll('.collapse.show');
        children.forEach((c)=>{
            var collapse = bootstrap.Collapse.getInstance(c)
            collapse.hide()
        })
    })
})

Demo: https://codeply.com/p/zGN9Vrf3Y3

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions