Nesting tabs is simple for complex navigation
I'm in Section 1.
I'm in Section 1.1.
I'm in Section 1.2.
I'm in Section 1.3.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
<div class="tabbable tabs-left" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#nested-tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#nested-tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#nested-tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="nested-tab1">
<p>I'm in Section 1.</p>
<div class="tabbable" style="background: #f5f5f5; padding: 20px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#nested-tab1-1" data-toggle="tab">1.1</a></li>
<li><a href="#nested-tab1-2" data-toggle="tab">1.2</a></li>
<li><a href="#nested-tab1-3" data-toggle="tab">1.3</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="nested-tab1-1">
<p>I'm in Section 1.1.</p>
</div>
<div class="tab-pane" id="nested-tab1-2">
<p>I'm in Section 1.2.</p>
</div>
<div class="tab-pane" id="nested-tab1-3">
<p>I'm in Section 1.3.</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="nested-tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="nested-tab3">
<p>What up girl, this is Section 3.</p>
</div>
</div>
</div>