im trying to achieve nested tabs with help of boostrap-5 tabs but couldn’t achieve and tried with vanila javascript again not luck. im trying to get parent and child content from database as follow:
now what im to trying achieve is that from database we get parent and child title in tab title section and parent/child content in tab-content section.
if parent have child then even if it have content it will only show its children content but when click on parent title it will show children title and when we click on children title then it will show children content in right-hand side tab-content section but if parent dont have child it will direct show its(parent) content on right-hand-side tab-content.
i try to achieve this with help of bootstrap-5 tabs but failed. so i tried with vanilla js for single tabs not nested tab but i couldnt apply active class for tabs
<!-- Tabs -->
<ul id="nav-tab" class="nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<h4>Home Panel Content</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iure quos cum, saepe reprehenderit minima quasi architecto numquam nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore sequi? Rerum, odio omnis.</p> </div>
<div class="tab-pane" id="profile">
<h4>Profile Panel</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iure quos cum, saepe reprehenderit minima quasi architecto numquam nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore sequi? Rerum, odio omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio, tempora incidunt aliquid adipisci, minus rerum optio libero quae provident sed at dignissimos, quia nostrum! Fuga dolorum quia hic magni.</p></div>
<div class="tab-pane" id="messages">
<h4>Messages Panel</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat quos, at qui aspernatur minus animi hic sunt necessitatibus incidunt molestiae reprehenderit ratione neque odit ipsa. Nemo laborum consequatur adipisci beatae!</p>
</div>
</div>
but when i put it in loop all tabs have active class and unable to figure how to dynamically put active class on click tab content only as in bootstrap if do something like:
<?php echo ($j===0)?'active':''; ?>
it could apply active to selected/ click tab-content only
how can i achieve nested tabs with bootstrap or with vanila js