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

html, javascript, jquery, twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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

Original source