Just like in the Inception movie, I'm trying to make a main navbar menu with dynamic tabs that contains a second navbar menu that shows other content.
I started the first nav-tabs menu using the template found at the Bootstrap 5 documentation page and it's running fine but the second nav-tab menu complicates things when trying to make it be triggered by a tab on the first menu. This gif explains better what I'm trying to do.
This the code I've written so far:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="second-stat-tab" aria-selected="true">STAT</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="inv-tab" data-bs-toggle="tab" data-bs-target="#inv" type="button" role="tab" aria-controls="inv" aria-selected="false">INV</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button" role="tab" aria-controls="map" aria-selected="false">MAP</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="radio-tab" data-bs-toggle="tab" data-bs-target="#radio" type="button" role="tab" aria-controls="radio" aria-selected="false">RADIO</button>
</li>
</ul>
<!-- BEGINNING OF SECOND TABLIST -->
<div class="tab-content" id="myTabContent">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<button class="nav-link" id="second-stat-tab" data-bs-toggle="tab" data-bs-target="#stat" type="button" role="tab" aria-controls="stat" aria-selected="true">STATUS</button>
</li><li class="nav-item">
<button class="nav-link" id="special-tab" data-bs-toggle="tab" data-bs-target="#special" type="button" role="tab" aria-controls="special">SPECIAL</button>
</li>
</ul>
</div>
<!-- END OF THE SECOND TABLIST -->
<!-- This is the content of the tabs-->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="stat" role="tabpanel" aria-labelledby="second-stat-tab">This is the status tab sample content
<div class="center-image">
<img src="vault_boy-removebg-preview_CROPPED.png" alt="">
</div>
</div>
<div class="tab-pane fade" id="special" role="tabpanel" aria-labelledby="special-tab">SPECIAL</div>
<div class="tab-pane fade" id="perks" role="tabpanel" aria-labelledby="perks-tab">PERKS</div>
</div>In this pen you can see the full code and the way the it behaves. I want the second nav-tab menu to show only as a result of clicking on the first tab of the first menu (the one called "STATS") but it just remains there.