I have a set of two tabs: boys and girls.
Within each tab, there are dropdown options for different age groups.
My goal is to display the selected age group under either the 'boys' or 'girls' tab.
- For example, if I choose 17-18, I want it to be displayed under the 'boys' tab.
What I have attempted so far:
- I've experimented with moving the content div within different areas but haven't achieved the desired outcome. This method worked in a previous project that didn't involve nested tabs, leading me to question if that's causing the issue.
Using Bootstrap 4.6
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
<a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
<div class="dropdown-menu">
<!-- Dropdown items for Boys age groups -->
</div>
</div>
</nav>
<!-- Test b content goes here -->
</div>
<div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
<div class="dropdown-menu">
<!-- Dropdown items for Girls age groups -->
</div>
</div>
</nav>
<!-- Test g content goes here -->
</div>
</div>
</div>
</div>