Multi-level tab Panel with Bootstrap - adding class .active 2 first-subpanel

Question

I am making multi-level panel page, based on Bootstrap. The structure is fine, but I would like the sub-panels to be active only when the parent panel is active too.

My code looks like :

<!-- NAV TABS N1-->
            <div class="row">
               <div class="col.......">
                  <ul class="nav nav-tabs">
                     <li class="active"><a href="#1A" data-toggle="tab">A</a></li>  
                     <li><a href="#1B" data-toggle="tab">B</a></li>
                  </ul>
               </div>
            </div>
<!-- /.NAV TABS N1-->

<!-- CONTENT N1 -->
<div class="tab-content">

    <!-- TAB CONTENT N1A -->
    <div class="tab-pane fade active in" id="1A">
    <div class="row">
        <div class="col....">

        <!-- NAV TABS N2 -->
        <div class="row">
           <div class="col.......">
              <ul class="nav nav-tabs">
                 <li class="active"><a href="#1Aa" data-toggle="tab">A1</a></li>  
                 <li><a href="#1Ab" data-toggle="tab">A2</a></li>
              </ul>
           </div>
        </div>
        <!-- /.NAV TABS N2 -->

        <!-- CONTENT N2 -->
        <div class="tab-content">
            <!-- TAB CONTENT N21 -->
            <div class="tab-pane fade active in" id="1Aa">
               <h1>A1</h1>
               <p>......</p>
            </div>
            <!-- TAB CONTENT N21 -->
            <div class="tab-pane fade" id="1Ab">
               <h1>A2</h1>
               <p>......</p>
            </div>
        </div>
        <!-- ./CONTENT N2 -->

    </div>
    </div>
    <!-- /.TAB CONTENT N1A -->

    <!-- TAB CONTENT N1B -->
    <div class="tab-pane fade" id="1B">
    <div class="row">
        <div class="col....">

        <!-- NAV TABS N2 -->
        <div class="row">
           <div class="col.......">
              <ul class="nav nav-tabs">
                 <li class="active"><a href="#1Ba" data-toggle="tab">A1</a></li>  
                 <li><a href="#1Bb" data-toggle="tab">A2</a></li>
              </ul>
           </div>
        </div>
        <!-- /.NAV TABS N2 -->

        <!-- CONTENT N2 -->
        <div class="tab-content">
            <!-- TAB CONTENT N21 -->
            <div class="tab-pane fade" id="1Ba">
               <h1>A1</h1>
               <p>......</p>
            </div>
            <!-- TAB CONTENT N21 -->
            <div class="tab-pane fade" id="1Bb">
               <h1>A2</h1>
               <p>......</p>
            </div>
        </div>
        <!-- ./CONTENT N2 -->

    </div>
    </div>
    <!-- /.TAB CONTENT N1B -->

</div>
<!-- ./CONTENT N1 -->

I would like to trigger the first sub-panel when its parent-panel is getting active, after clicking on it. So it tried this piece of JQuery, but I am not so good at this so it does not work :

$( "#1B" ).click(function () {
            ( "#1Ba" ).addClass('in active');
           });

Any idea ?

Answer 1

I have something like that, perhaps could help you. If you still needs, of course hehehe

function getRootChild(element, childs) {
    childs.push(element);
    if (element.next('li.child').length > 0) {
         getRootChild(element.next('li.child'), childs);
    }
}

$("li.list-group-item.root").on('click', function() {
    var childs = [];

    getRootChild($(this).next('li.child'), childs);

    for(idx in childs) {
        $(childs[idx]).slideToggle();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="list-group-item root">
  <a href="#">
    Root item
  </a>
</li>
<li class="list-group-item child" style="display: none;">
  <a href="#">
    child 1
  </a>
</li>
<li class="list-group-item child" style="display: none;">
  <a href="#">
    child 2
  </a>
</li>