I am encountering a challenge with nested tabs. I am utilizing Bootstrap and not using custom CSS. Any assistance would be greatly appreciated.
<div class="container-fluid">
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a id="1" href="#">Tab 1</a>
</li>
<li><a id="2" href="#">Tab 2</a></li>
<li><a id="3" href="#">Tab 3</a></li>
</ul>
<div class="tabContent" id="tabContent1">
Tab Content 1
<ul class="nav nav-tabs inertabs">
<li class="active">
<a id="11" href="#">T11</a>
</li>
<li><a id="12" href="#">T12</a></li>
<li><a id="13" href="#">T13</a></li>
<li><a id="14" href="#">WK</a></li>
<li><a id="15" href="#">MND</a></li>
<li><a id="16" href="#">YTD</a></li>
</ul>
<div class="tabContent1" id="tabContent111">
Tab Content 11
</div>
<div class="tabContent1" id="tabContent112">
Tab Content 12
</div>
<div class="tabContent1" id="tabContent113">
Tab Content 13
</div>
</div>
<div class="tabContent" id="tabContent2">
Tab Content 2
</div>
<div class="tabContent" id="tabContent3">
Tab Content 3
</div>
</div>
<script type="text/javascript">
$('.nav a').click(function (e) {
$(this).tab('show');
var tabContent = '#tabContent' + this.id;
$('#tabContent1').hide();
$('#tabContent2').hide();
$('#tabContent3').hide();
$(tabContent).show();
})
$('.inertabs a').click(function (e) {
$(this).tab('show');
var tabContent = '#tabContent' + this.id;
$('#tabContent11').hide();
$('#tabContent12').hide();
$('#tabContent13').hide();
$(tabContent).show();
})
</script>
https://i.sstatic.net/z06kI.png
I have made progress on the issue, but there is a specific requirement remaining. When Tab1 is clicked, I need Tabs 2 and 3 to remain hidden. However, when an inert Tab like Tab11 is clicked, it should function like the parent tabs without hiding them. Any insight would be appreciated.
Your assistance is greatly appreciated.