Nested bootstrap tabs - jQuery

Question

I have multiple level tabs like this:

<ul class="nav nav-tabs" id="interest_tabs">
    <!--top level tabs-->
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
    <!--all tab menu-->
    <div id="all" class="tab-pane">
        <ul class="nav nav-tabs" id="all_tabs">
            <li><a href="#all_popular" data-toggle="tab">Popular</a></li>
        </ul>
    </div>

    <!--brands tab menu-->
    <div id="brands" class="tab-pane">
        <ul class="nav nav-tabs" id="brands_tabs">
            <li><a href="#brands_popular" data-toggle="tab">Popular</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
        </ul>
    </div>

 </div>
 <div>

    <!--all tab content-->
    <div class="tab-content">
        <div id="all_popular" class="tab-pane">
            <i>all_popular interests go here</i>
        </div>
        <div id="all_unique" class="tab-pane">
            <i>all_unique interests go here</i>
        </div>
    </div>

    <!--brands tab content-->
    <div class="tab-content">
        <div id="brands_popular" class="tab-pane">
            <i>brands_popular interests go here</i>
        </div>
        <div id="brands_unique" class="tab-pane">
            <i>brands_unique interests go here</i>
        </div>
    </div>
</div>

And here is the jQuery part:

jQuery(document).ready(function($) {
    $('#interest_tabs').on('click', 'a[data-toggle="tab"]', function(e) {
        e.preventDefault();
        var $link = $(this);
        if (!$link.parent().hasClass('active')) {
          //remove active class from other tab-panes
          $('.tab-content:not(.' + $link.attr('href').replace('#','') + ') .tab-pane').removeClass('active');
          // click first submenu tab for active section
          $('a[href="' + $link.attr('href') + '_all"][data-toggle="tab"]').click();
          // activate tab-pane for active section
          $('.tab-content.' + $link.attr('href').replace('#','') + ' .tab-pane:first').addClass('active');
        }
    });
});

The issue here is when for example I access the All tab and then its child Popular it displays its content, but when I go to the other tab Brands and then return to the first tab All, I can't access its content anymore.

Here is the jsfiddle: http://jsfiddle.net/36hk5bne/

If I understands you correctly, You want to retain the tab's content after switching between tabs the content shouldn't be removed ? — Suhaib Janjua
– Suhaib Janjua, Commented Feb 10, 2015 at 12:43

Wouter Thielen · Accepted Answer · 2015-02-10 13:23:37Z

1

Just put the div.tab-content under their respective ul tabs. This way, it works, without any additional JavaScript code.

The main level tabs show the first tab-content, which is where your second level tabs are, including their tab-content.

Here is the HTML that you need. No additional JS needed:

<ul class="nav nav-tabs" id="interest_tabs">
    <!--top level tabs-->
    <li><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
</ul>

<!--top level tab content-->
<div class="tab-content">
    <!--all tab menu-->
    <div id="all" class="tab-pane">
        <ul class="nav nav-tabs" id="all_tabs">
            <li><a href="#all_popular" data-toggle="tab">Popular</a></li>
        </ul>
        <div class="tab-content">
            <div id="all_popular" class="tab-pane">
                <i>all_popular interests go here</i>
            </div>
            <div id="all_unique" class="tab-pane">
                <i>all_unique interests go here</i>
            </div>
        </div>
    </div>

    <!--brands tab menu-->
    <div id="brands" class="tab-pane">
        <ul class="nav nav-tabs" id="brands_tabs">
            <li><a href="#brands_popular" data-toggle="tab">Popular</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
        </ul>
        <div class="tab-content">
            <div id="brands_popular" class="tab-pane">
                <i>brands_popular interests go here</i>
            </div>
            <div id="brands_unique" class="tab-pane">
                <i>brands_unique interests go here</i>
            </div>
        </div>
    </div>
</div>

Here is a fiddle, based on yours: http://jsfiddle.net/36hk5bne/1/

answered Feb 10, 2015 at 13:23

Wouter Thielen

1,0369 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3350731 Over a year ago

I'd prefer if each block content would stay inside a div because I'd like to display them in a vertical way like this : jsfiddle.net/36hk5bne/2/show

Wouter Thielen Over a year ago

Ah, interesting. I had something similar in one of my projects. I have updated your fiddle. In this case, I added a class "middle" to the middle col-md-3, so that I can refer to it and its nav-tabs in JS, and tell it to remove the "active" class from all the tabs so that they become clickable again, when you change tabs in the "#interest_tabs" one. I have also cleaned up the JavaScript code a bit. Here is the fiddle: jsfiddle.net/36hk5bne/4.

Carol Skelly · Accepted Answer · 2015-02-10 13:15:33Z

You need to use nested markup. The tab content should be inside the parent tab's pane. Then active can be set on the default tabs and panes.

<div class="tabbable">
  <ul class="nav nav-tabs" id="interest_tabs">
      <!--top level tabs-->
    <li class="active"><a href="#all" data-toggle="tab">All</a></li>
    <li><a href="#brands" data-toggle="tab">Brands</a></li>
  </ul>


  <!--top level tab content-->
  <div class="tab-content">
      <!--all tab menu-->
      <div id="all" class="tab-pane active">
          <ul class="nav nav-tabs" id="all_tabs">
              <li class="active"><a href="#all_popular" data-toggle="tab">Popular</a></li>
          </ul>
          <!--all tab content-->
          <div class="tab-content">
              <div id="all_popular" class="tab-pane active">
                  <i>all_popular interests go here</i>
              </div>
              <div id="all_unique" class="tab-pane">
                  <i>all_unique interests go here</i>
              </div>
          </div>
      </div><!--all tab pane-->

      <!--brands tab menu-->
      <div id="brands" class="tab-pane">
          <ul class="nav nav-tabs" id="brands_tabs">
              <li class="active"><a href="#brands_popular" data-toggle="tab">Popular</a></li>
              <li><a href="#brands_unique" data-toggle="tab">Unique</a></li>
          </ul>

          <!--brands tab content-->
          <div class="tab-content">
              <div id="brands_popular" class="tab-pane active">
                  <i>brands_popular interests go here</i>
              </div>
              <div id="brands_unique" class="tab-pane">
                  <i>brands_unique interests go here</i>
              </div>
          </div>

      </div><!--brands tab pane-->

  </div> <!--top level tab content-->
</div>

http://bootply.com/OHJJnjo0bc

I'd prefer if each block content would stay inside a div because I'd like to display them in a vertical way like this : jsfiddle.net/36hk5bne/2/show

Collectives™ on Stack Overflow

Nested bootstrap tabs - jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related