I am trying to put a tab inside of a tab, but whenever I click a inner nested tab, the entire inner nested tab row goes away. Here is an example in a jsfiddle
/
Try clicking "Acquisitions/Facebook" tab. You will notice the second row of tabs just disappear.
Here is my code
<h1> Dashboard </h1>
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
</ul>
</div>
<div id="engagement_tab" class="tab-pane">
<p> Engagement tab </p>
</div>
<div id="retention_tab" class="tab-pane">
<p> Retention tab </p>
</div>
<div id="revenue_tab" class="tab-pane">
<p> Revenue tab </p>
</div>
<div id="all_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="facebook_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="yahoo_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
</div>
I am trying to put a tab inside of a tab, but whenever I click a inner nested tab, the entire inner nested tab row goes away. Here is an example in a jsfiddle
http://jsfiddle/jNWMY/1/
Try clicking "Acquisitions/Facebook" tab. You will notice the second row of tabs just disappear.
Here is my code
<h1> Dashboard </h1>
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
</ul>
</div>
<div id="engagement_tab" class="tab-pane">
<p> Engagement tab </p>
</div>
<div id="retention_tab" class="tab-pane">
<p> Retention tab </p>
</div>
<div id="revenue_tab" class="tab-pane">
<p> Revenue tab </p>
</div>
<div id="all_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="facebook_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
<div id="yahoo_acquisition_tab" class="tab-pane">
<p> All acquisition </p>
</div>
</div>
Share
Improve this question
edited Oct 23, 2013 at 16:33
austin
5,8762 gold badges34 silver badges40 bronze badges
asked Oct 23, 2013 at 2:18
user2158382user2158382
4,51013 gold badges58 silver badges100 bronze badges
1 Answer
Reset to default 15Your inner tabs should be wrapped in a div with the tab-content
class.
Try this...
<h1> Dashboard </h1>
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#acquisition_tab" data-toggle="tab"><b>Acquisition</b> <span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#engagement_tab" data-toggle="tab">Engagement</a></li>
<li><a href="#retention_tab" data-toggle="tab">Retention</a></li>
<li><a href="#revenue_tab" data-toggle="tab">Revenue</a></li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li><a href="#all_acquisition_tab" data-toggle="tab"><b>All</b><span style="color:red">(-30%)</span> <br> Total Installs</a></li>
<li><a href="#facebook_acquisition_tab" data-toggle="tab"><b>Facebook</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
<li><a href="#yahoo_acquisition_tab" data-toggle="tab"><b>Yahoo</b><span style="color:red">(-30%)</span> <br> Total Installs</a></a></li>
</ul>
</div>
<div id="engagement_tab" class="tab-pane">
<p>Engagement tab</p>
</div>
<div id="retention_tab" class="tab-pane">
<p>Retention tab</p>
</div>
<div id="revenue_tab" class="tab-pane">
<p>Revenue tab</p>
</div>
<div class="tab-content">
<div id="all_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
<div id="facebook_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
<div id="yahoo_acquisition_tab" class="tab-pane">
<p>All acquisition</p>
</div>
</div>
</div>