javascript - Nested tabs in bootstrap

Question

I have nested tabs in Bootstrap, and here is the code: http://jsfiddle.net/RLdYC/

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You have more than one element with id myTabContent.

HTML ids should be unique across the page.

Simply remove those ids or use classes instead (working demo here).

$("ul.nav-tabs a").click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">Tab 1</a>
        </li>
        <li><a href="#set2">Tab 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" id="set1">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub11">Tab 1.1</a>
                    </li>
                    <li><a href="#sub12">Tab 1.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>Tab 1.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>Tab 1.2</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="set2">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#sub21">Tab 2.1</a>
                    </li>
                    <li><a href="#sub22">Tab 2.2</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub21">
                        <p>Tab 2.1</p>
                    </div>
                    <div class="tab-pane fade" id="sub22">
                        <p>Tab 2.2</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>