Nested bootstrap 5 accordions not collapsing open panels

Question

I have some page content broken up with nested bootstrap accordions. I am using bootstrap 5.

The parent accordion is split between continents, with each panel then containing another accordion split between countries.

My parent accordion acts as expected - selecting 1 continent will close the previously selected continent. However my nested accordions are not closing previously selected country panels as I would expect.

I believe I am setting the value of data-bs-parent appropriately in all cases. What else might be causing this issue?

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script> <div class="accordion" id="port-accordion"> <div class="accordion-item"> <h2 class="accordion-header" id="accordion-header-one"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one"> North America </button> </h2> <div id="collapse-one" class="accordion-collapse collapse" aria-labelledby="accordion-header-one" data-bs-parent="#port-accordion" style=""> <div class="accordion-body" data-hotspot="1"> <div class="accordion" id="country-accordion-one"> <div class="accordion-item" id="accordion-item-canada"> <h2 class="accordion-header" id="accordion-header-canada"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-canada" aria-expanded="false" aria-controls="collapse-canada">Canada</button> </h2> <div id="collapse-canada" class="accordion-collapse collapse" aria-labelledby="accordion-header-canada" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-mexico"> <h2 class="accordion-header" id="accordion-header-mexico"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-mexico" aria-expanded="false" aria-controls="collapse-mexico">Mexico</button> </h2> <div id="collapse-mexico" class="accordion-collapse collapse" aria-labelledby="accordion-header-mexico" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-united-states-of-america"> <h2 class="accordion-header" id="accordion-header-united-states-of-america"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-united-states-of-america" aria-expanded="false" aria-controls="collapse-united-states-of-america">United States Of America</button> </h2> <div id="collapse-united-states-of-america" class="accordion-collapse collapse" aria-labelledby="accordion-header-united-states-of-america" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> </div> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="accordion-header-two"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two"> South America </button> </h2> <div id="collapse-two" class="accordion-collapse collapse show" aria-labelledby="accordion-header-two" data-bs-parent="#port-accordion" style=""> <div class="accordion-body" data-hotspot="2"> <div class="accordion" id="country-accordion-two"> <div class="accordion-item" id="accordion-item-aruba"> <h2 class="accordion-header" id="accordion-header-aruba"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-aruba" aria-expanded="false" aria-controls="collapse-aruba">Aruba</button> </h2> <div id="collapse-aruba" class="accordion-collapse collapse" aria-labelledby="accordion-header-aruba" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-curacao"> <h2 class="accordion-header" id="accordion-header-curacao"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-curacao" aria-expanded="true" aria-controls="collapse-curacao">Curacao</button> </h2> <div id="collapse-curacao" class="accordion-collapse collapse show" aria-labelledby="accordion-header-curacao" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-trinidad-and-tobago"> <h2 class="accordion-header" id="accordion-header-trinidad-and-tobago"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-trinidad-and-tobago" aria-expanded="true" aria-controls="collapse-trinidad-and-tobago">Trinidad and Tobago</button> </h2> <div id="collapse-trinidad-and-tobago" class="accordion-collapse collapse show" aria-labelledby="accordion-header-trinidad-and-tobago" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

You need to add the following to your angular.json file:

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]