TBS 2.1.1 Nested Tabs

by SnackyPete

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<div class="tabbable tabs-left">
    <ul class="nav nav-tabs nav-stacked" style="height:100px">
        <li><a href="#course" data-toggle="tab"  style="height:100px">A</a></li>
        <li><a href="#module1" data-toggle="tab" style="height:100px">B</a></li>
        <li><a href="#module2" data-toggle="tab" style="height:100px">C</a></li>    
    </ul>
    <ul class="tab-content">
        <li class="tab-pane active" id="course">
            <p>I'm in a course.</p>
        </li>
        <li class="tab-pane" id="module1">
            <ul class="nav nav-tabs nav-stacked" >
                <li><a href="#module1-step1" data-toggle="tab" style="height:158px">1</a></li>
                <li><a href="#module1-step2" data-toggle="tab" style="height:158px">2</a></li>
            </ul>
            <ul class="tab-content">
                <li class="tab-pane active" id="module1-step1">
                    <p>I'm Module 1 Step 1.</p>
                </li>
                <li class="tab-pane" id="module1-step2">
                    <p>Howdy, I'm Module 1 Step 2</p>
                </li>
            </ul>
        </li>
        <li class="tab-pane" id="module2">
            <ul class="nav nav-tabs nav-stacked" >
                <li><a href="#module2-step1" data-toggle="tab">Step 1</a></li>
                <li><a href="#module2-step2" data-toggle="tab">Step 2</a></li>
            </ul>
            <ul class="tab-content">
                <li class="tab-pane active" id="module2-step1">
                    <p>I'm Module 2 Step 1.</p>
                </li>
                <li class="tab-pane" id="module2-step2">
                    <p>Howdy, I'm Module 2 Step 2</p>
                </li>
            </ul>
        </li>
    </ul>
</div>