I recently started learning how to use Bootstrap and found it easy to create a webpage with easy navigation features.
As I was working on implementing an accordion inside a navbar for easier navigation, I encountered an issue. While the first tab and accordion function correctly, the others do not work properly when interacting with them.
In the first accordion, clicking on any card closes the others as expected. However, in the subsequent accordions, the cards remain displayed and I can't figure out what's causing this issue.
I double-checked the data-target, data-toggle, aria-labelledby attributes, and classes but couldn't pinpoint the problem. I suspect it might be due to the div structure, as I'm inserting a div with the accordion class in each tab-pane.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
aria-selected="true">1. Introduction</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile"
aria-selected="false">2. Wet AMD Symptoms</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact"
aria-selected="false">3. Risk Factors</a>
</div>
</nav>
...
If you want to take a closer look at my code, feel free to visit my fiddle link.