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>
