How to have top and bottom tabs for bootstrap tab work in tandom

Question

I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

I want the bottom tabs to change accordingly when I click on the top once and visa-versa.

The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active

I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.

Any suggestion or tips will be appreciated.

Thanks

Answer 1

Try this:

$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
    $('.nav-tabs-bottom li.active').removeClass('active')
    $('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})

$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
    $('.nav-tabs-top li.active').removeClass('active')
    $('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})

• Result here
• Code here