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>

The problem is, as soon as you click on a different tab on the top row, the actual content of the nested tab below will become hidden. I need the content of the first subtab to be shown.

I tried to trigger the click() function on the first subtab, but it didn't help. Can you please write the code that I need to fix this?

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>