In my Bootstrap 4 project, I came across a helpful solution on Stack Overflow for creating a dropdown accordion style using JavaScript (Twitter Bootstrap: How to create a dropdown button with an accordion inside it?). I customized the script for my website's navigation but encountered an issue where the JavaScript only targets the ID "accordion" and not other IDs like "accordion1." This poses a problem when navigating out of the menu as only the first panel is affected. Unfortunately, I can't use the form tag method outlined in Bootstrap 4: How to create a dropdown menu with an accordion inside it?. You can view a sample on Codeply
My question also relates to opening multiple accordion panels simultaneously.
<div class="collapse navbar-collapse " id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ONBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Item 02
</a>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A</a>
</div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OFFBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion1">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion1" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
Item 02
</a>
<div id="collapsetwo" class="collapse px-3" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A
</a></div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.show').collapse('hide');
});
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function(event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.collapse.show').collapse('hide');
$($(this).attr('href')).collapse('show');
})
</script>