Bootstrap Nested Tabs

Question

I'm new to bootstrap having trouble creating nested tabs right, Here is what I have at the moment: http://codepen.io/anon/pen/gbYZrV

As you can see I'm trying to create simple and very popular menu example: I'm really not sure what I'm doing is the right technique maybe there something easier? I can't find anything on github how is that possible it was never created for bootstrap?

The issues I'm facing 1. Content will not display (only after mouse click) 2. If you click on different link, Always make first <li>to be active + show the content.

    <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>
  <li><a href="#media" data-toggle="tab">Media</a></li>
  <li><a href="#music" data-toggle="tab">Music</a></li>
  <li><a href="#public_figures" data-toggle="tab">Public Figures</a></li>
  <li><a href="#sports" data-toggle="tab">Sports</a></li>
  <li><a href="#tv_movies" data-toggle="tab">TV/Movies</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">PopularAll</a></li>
            <li><a href="#all_unique" data-toggle="tab">UniqueAll</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">Popularbrands</a></li>
            <li><a href="#brands_unique" data-toggle="tab">Uniquebrands</a></li>
        </ul>
    </div>

    <!--media tab menu-->
    <div id="media" class="tab-pane">
        <ul class="nav nav-tabs" id="media_tabs">
            <li><a href="#media_popular" data-toggle="tab">Popularmedia</a></li>
            <li><a href="#media_unique" data-toggle="tab">Uniquemedia</a></li>
        </ul>
    </div>

    <!--music tab menu-->
    <div id="music" class="tab-pane">
        <ul class="nav nav-tabs" id="music_tabs">
            <li><a href="#music_popular" data-toggle="tab">Popularmusic</a></li>
            <li><a href="#music_unique" data-toggle="tab">Uniquemusic</a></li>
        </ul>
    </div>

    <!--public_figures tab menu-->
    <div id="public_figures" class="tab-pane">
        <ul class="nav nav-tabs" id="public_figures_tabs">
            <li><a href="#public_figures_popular" data-toggle="tab">Popularfigures</a></li>
            <li><a href="#public_figures_unique" data-toggle="tab">Uniquefigures</a></li>
        </ul>
    </div>

    <!--sports tab menu-->
    <div id="sports" class="tab-pane">
        <ul class="nav nav-tabs" id="sports_tabs">
            <li><a href="#sports_popular" data-toggle="tab">Popularsports</a></li>
            <li><a href="#sports_unique" data-toggle="tab">Uniquesports</a></li>
        </ul>
    </div>

  <!--tv/movies tab menu-->
    <div id="tv_movies" class="tab-pane">
        <ul class="nav nav-tabs" id="tv_movies_tabs">
            <li><a href="#tv_movies_popular" data-toggle="tab">Popularmovies</a></li>
            <li><a href="#tv_movies_unique" data-toggle="tab">Uniquemovies</a></li>
        </ul>
    </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>

    <!--media tab content-->
    <div class="tab-content">
        <div id="media_popular" class="tab-pane">
            <i>media_popular interests go here</i>
        </div>
        <div id="media_unique" class="tab-pane">
            <i>media_unique interests go here</i>
        </div>
    </div>

    <!--music tab content-->
    <div class="tab-content">
        <div id="music_popular" class="tab-pane">
            <i>music_popular interests go here</i>
        </div>
        <div id="music_unique" class="tab-pane">
            <i>music_unique interests go here</i>
        </div>
    </div>

    <!--public_figures tab content-->
    <div class="tab-content">
        <div id="public_figures_popular" class="tab-pane">
            <i>public_figures_popular interests go here</i>
        </div>
        <div id="public_figures_unique" class="tab-pane">
            <i>public_figures_unique interests go here</i>
        </div>
    </div>

    <!--sports tab content-->
    <div class="tab-content">
        <div id="sports_popular" class="tab-pane">
            <i>sports_popular interests go here</i>
        </div>
        <div id="sports_unique" class="tab-pane">
            <i>sports_unique interests go here</i>
        </div>
    </div>

    <!--tv_movies tab content-->
    <div class="tab-content">
        <div id="tv_movies_popular" class="tab-pane">
            <i>tv_movies_popular interests go here</i>
        </div>
        <div id="tv_movies_unique" class="tab-pane">
            <i>tv_movies_unique interests go here</i>
        </div>
    </div>

</div>

JS:

$('#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');
      }

    });

CSS:

//style second tab menu differently
.tab-content li.active a, .tab-content li.active a:hover {
border: 0px;
box-shadow: inset 0 -3px 0 #323b43;
}
.tab-content li a:hover {
box-shadow: inset 0 -3px #ced7df;
}

Answer 1

Updated 2018 for Bootstrap 4.0.0

You'll want to nest the sub tabs and content inside the parent tab content like this...

<div class="tabbable boxed parentTabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#set1">All</a>
        </li>
        <li><a href="#set2">Brands</a>
        </li>
        <li><a href="#media">Media</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">PopularAll</a>
                    </li>
                    <li><a href="#sub12">UniqueAll</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="sub11">
                        <p>pop all content</p>
                    </div>
                    <div class="tab-pane fade" id="sub12">
                        <p>unique all content</p>
                    </div>
                </div>
            </div>
        </div>
        ...
    </div>
</div>

Bootstrap 3 demo

---

Bootstrap 4 demo