Boostrap 3, Multiple Nav to control single Tab-Pane

Question

I'd like to control a single tab-pane using multiple groups of nav buttons buttons. Currently, the previous nav is not deactivated when a new nav is activated in the other nav group. Thus, two nav buttons are activated at any given time.

First Nav menu:

<!-- Nav Menu 1 -->             
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
                <li><a href="#tab-2" data-toggle="tab">TAB TWO</li>
                <li><a href="#tab-3" data-toggle="tab">TAB THREE</li></ul>  

Second Nav menu:

 <!-- Nav Menu 2 -->                
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
                <li><a href="#tab-5" data-toggle="tab">TAB FIVE</li>
                <li><a href="#tab-6" data-toggle="tab">TAB SIX</li> </ul>                   

And the Tab Panel:

<div class="tab-content" id="myTab">
   <div class="tab-pane fade in active" id="tab-1">
       <p>TAB ONE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-2">
       <p>TAB TWO CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-3">
       <p>TAB THREE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-4">
       <p>TAB FOUR CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-5">
       <p>TAB FIVE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-6">
       <p>TAB SIX CONTENT</p>
   </div>

Again, the buttons control the Tab Panel correctly, HOWEVER the previous Nav button is not deactivated when clicking on one from the other Nav div.

Answer 1

From what I understood from the question, you needed the class="active" link from group one removed if you click group two, and vice-versa. I achieved this using a quick and dirty Javascript function:

Html:

<ul class="nav nav-pills nav-stacked" id="tabGroupOne"> 
  <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
  <li><a href="#tab-2" data-toggle="tab">TAB TWO</a></li>
  <li><a href="#tab-3" data-toggle="tab">TAB THREE</a></li>
</ul> 

<ul class="nav nav-pills nav-stacked" id="tabGroupTwo"> 
  <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
  <li><a href="#tab-5" data-toggle="tab">TAB FIVE</a></li>
  <li><a href="#tab-6" data-toggle="tab">TAB SIX</a></li> 
</ul> 

Javascript/jQuery:

$("#tabGroupTwo").children().click(function(e){
  $("#tabGroupOne").children().each(function(f){
    $(this).removeClass("active");
  });
});

$("#tabGroupOne").children().click(function(e){
  $("#tabGroupTwo").children().each(function(f){
    $(this).removeClass("active");
  });
});

Basically, when you click on any <li> item in list one, it will remove the active class of any of the links in group two. Vice-versa for clicking any of the links in group two.

An alternative is to disable all other ul class="nav nav-pills" children whenever any link is clicked, but the above should suffice as long as you keep the navs to a max of two.

Note, you also had some html markup issues: Multiple IDs and missing </a> tags. These could also cause your code to behave oddly.

Here's the working version:

Bootply