Bootstrap Tabs not hiding non-active divs

tabs, twitter-bootstrap

Solution

Please try below code. All you need to do is, remove the `<Ul>` inside of the `<div class="tab-content">` and use `<div class="tab-pane">` instead of `<div class="tab-pain">`. Also change the href from href="#HoF" to be href="#HOF".

<p>
    <i class="icon-heart"></i>&nbsp;Progression</p>
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#MSV">MSV</a></li>
    <li><a data-toggle="tab" href="#TOES">ToES</a></li>
    <li><a data-toggle="tab" href="#HOF">HoF</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="MSV">
        <li>Mogu'shan Vaults</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;">
                        6/6</div>
                </div>
            </li>
        </a><a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="HOF">
        <li>Heart of Fear</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 20%;">
                        1/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="TOES">
        <li>Terrace of Endless Spring</li>
        <a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>

Problem

Original source