Bootstrap 2.3.2

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<div class="row">
    <div class="span4">
        <div class="side-nav-container affix-top">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a>

                    <ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
                        <li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a>

                        </li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a>

                        </li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a>

                        </li>
                    </ul>
                </li>
                <li><a data-toggle="tab" href="#Tab2">Tab2</a>

                </li>
                <li><a data-toggle="tab" href="#Tab3">Tab3</a>

                </li>
                <li><a data-toggle="tab" href="#Tab4">Tab4</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="span8">
        <div class="tab-content">
            <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
            <div class="tab-pane fade" id="Subtab2">Content 1b</div>
            <div class="tab-pane fade" id="Subtab3">Content 1c</div>
            <div class="tab-pane fade" id="Tab2">Content 2</div>
            <div class="tab-pane fade" id="Tab3">Content 3</div>
            <div class="tab-pane fade" id="Tab4">Content 4</div>
        </div>
    </div>
</div>

CSS

.nav-tabs > li {
    margin: 0 0 1px 0;
}
.nav-tabs > li > a {
    height: 36px;
    padding: 0 17px;
    line-height: 36px;
    color: rgb(64, 64, 64);
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.nav-tabs.nav-stacked > li:last-child > a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.nav-tabs.nav-stacked > li:first-child > a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.nav-tabs.nav-stacked > li > a:hover, .nav-tabs.nav-stacked > li > a:focus {
    border: none;
    outline: none;
    -moz-outline-style: none;
}
.nav-tabs.nav-stacked > li > a:hover {
    background: rgb(181, 181, 181);
    color: rgb(242, 242, 242);
}
.nav-tabs.nav-stacked > li > a {
    border: none;
}
.nav-tabs.nav-stacked > li.active > a, .nav-tabs.nav-stacked > li.active > a:hover {
    color: rgb(242, 242, 242);
    background: rgb(50, 150, 50);
}
.subnav {
    width: 200px;
    float: right;
    margin: 0 0 0;
}
.nav-tabs > li:after {
    content:'';
    display: table;
    clear: both;
}

JavaScript

$('.nav-tabs [data-toggle="collapse"]').on('click', function () {

    if ($($(this).attr('href')).hasClass('in')) return false;

    //make collapse links act like tabs
    $(this).parent().addClass('active').siblings('li').removeClass('active');
    //Activate first sub tab
    $($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');

});

$('.nav-tabs > li > a').on('click', function () {
    if ($(this).data('toggle') != 'collapse') {
        $(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');

    }

});