Reset Active Child in Twitter Bootstrap Nested Tabs

Question

The project calls for 3 parent tabs (P), each containing a set of 3 child tabs (c).

The problem: when user exits at P1c3, navigating to another parent set, then goes back to P1, c3 is still active. Does anyone know how to reset the default active child to c1 when P1 is opened?

Basic structure, nothing out of the ordinary.

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li><a href="#P1" data-toggle="tab">P1</a></li>
    <li><a href="#P2" data-toggle="tab">P2</a></li>
    <li><a href="#P3" data-toggle="tab">P3</a></li>
  </ul>

<div class="tab-content tab-container">

  <div class="tab-pane" id="P1">
      <div class="tabbable tabs-left"> 
          <ul class="nav nav-tabs">
              <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
              <li><a href="#c2" data-toggle="tab">c2</a></li>
              <li><a href="#c3" data-toggle="tab">c3</a></li>
          </ul>
          <div class="tab-content tab-info">
              <div class="tab-pane active" id="c1">
                P1 child 1                                       
              </div>
              <div class="tab-pane" id="c2">
                P1 child 2
              </div>
              <div class="tab-pane" id="c3">
                P1 child 3
              </div>
          </div>
      </div>
  </div>

etc...

Answer 1

When you click on a parent item, call $.trigger on the first child tab to reset the it back to the first tab. Very rough, but hopefully you get an idea.

<ul class="nav parent nav-tabs">
   <li><a href="#P1" data-toggle="tab">P1</a></li>
   <li><a href="#P2" data-toggle="tab">P2</a></li>
   <li><a href="#P3" data-toggle="tab">P3</a></li>
</ul>

<ul class="nav child nav-tabs">
   <li class="active"><a href="#c1" data-toggle="tab">c1</a></li>
   <li><a href="#c2" data-toggle="tab">c2</a></li>
   <li><a href="#c3" data-toggle="tab">c3</a></li>
</ul>

$(".parent li a").on("click", function () { $(".child li a").first().trigger("click"); });