Multiple Collapse Bootstrap

user_10063225 0
Viewed 814

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>

bootstrap-5 collapse accordion css html
1 Answers

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

user_1714560
Related