Bootstrap: Control multiple tab panels with single tab nav
10,910
Solution 1
Bootstrap 5 (update 2021)
This is not possible with Tabs "out of the box". However, JS could be used to show secondary tab-panes...
document.querySelectorAll('button[data-bs-toggle="tab"]').forEach((t,i)=>{
t.addEventListener('show.bs.tab', function (e) {
let targetClass = t.dataset.bsTarget
var pane = document.querySelector('#secondTabContent '+targetClass)
var sibling = document.querySelector('#secondTabContent .tab-pane.active')
// hide 2nd pane sibling
sibling.classList.remove('show')
sibling.classList.remove('active')
// show 2nd pane
pane.classList.add('show')
pane.classList.add('active')
})
})
Bootstrap 5 - multiple Tab panes from single Nav
Bootstrap 4 (original answer)
This is not possible in Bootstrap 4.0.0. This is currently an open issue, and a possible "idea" for Bootstrap 4.1.
https://github.com/twbs/bootstrap/issues/19964
Solution 2
I've actually found a way to make this work. It's not the most beautiful solution but it does make the job.
Here is what you'll need to do:
$(document).on('click', '#ueberTab a', function(e) {
otherTabs = $(this).attr('data-secondary').split(',');
for(i= 0; i<otherTabs.length;i++) {
nav = $('<ul class="nav d-none" id="tmpNav"></ul>');
nav.append('<li class="nav-item"><a href="#" data-toggle="tab" data-target="' + otherTabs[i] + '">nav</a></li>"');
nav.find('a').tab('show');
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><div class="B">
<div class="container">
<div class="tab-content" id="ueberTabA">
<div class="tab-pane fade" id="panel_a_first" role="tabpanel" aria-labelledby="first-tab">
A First
</div>
<div class="tab-pane fade show active" id="panel_a_second" role="tabpanel" aria-labelledby="second-tab">
A Second
</div>
<div class="tab-pane fade" id="panel_a_third" role="tabpanel" aria-labelledby="third-tab">
A Third
</div>
</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" id="ueberTab" role="tablist">
<li class="nav-item"><a class="nav-link" id="first-tab" data-target="#panel_b_first" data-secondary="#panel_a_first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">first</a></li>
<li class="nav-item"><a class="nav-link active" id="second-tab" data-target="#panel_b_second" data-secondary="#panel_a_second" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="true">second</a></li>
<li class="nav-item"><a class="nav-link" id="third-tab" data-target="#panel_b_thrid" data-secondary="#panel_a_third" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Unser third</a></li>
</ul>
<div class="tab-content" id="ueberTabB">
<div class="tab-pane fade" id="panel_b_first" role="tabpanel" aria-labelledby="first-tab">
B First
</div>
<div class="tab-pane fade show active" id="panel_b_second" role="tabpanel" aria-labelledby="second-tab">
B Second
</div>
<div class="tab-pane fade" id="panel_b_thrid" role="tabpanel" aria-labelledby="third-tab">
B Third
</div>
</div>
</div>
Comments
-
Cray about 2 years
I want to control two differnt tab contents with a single tab navigation.
In Bootstra 3 I had a solution with comma separated data targets (like in this example: https://stackoverflow.com/a/19719859/1788961).
But in Bootsrap 4, this way is not working anymore for tabs.
The collapse component could work with multiple targets, but I couldn't use it for the tabs: https://getbootstrap.com/docs/4.0/components/collapse/#multiple-targets
Is there an other way to do this?
Here's my code:
<div class="B"> <div class="container"> <div class="tab-content" id="ueberTabA"> <div class="tab-pane fade" id="panel_a_first" role="tabpanel" aria-labelledby="first-tab"> A First </div> <div class="tab-pane fade show active" id="panel_a_second" role="tabpanel" aria-labelledby="second-tab"> A Second </div> <div class="tab-pane fade" id="panel_a_third" role="tabpanel" aria-labelledby="third-tab"> A Third </div> </div> </div> </div> <div class="container"> <ul class="nav nav-tabs" id="ueberTab" role="tablist"> <li class="nav-item"><a class="nav-link" id="first-tab" data-target="#panel_b_first, #panel_a_first" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="false">first</a></li> <li class="nav-item"><a class="nav-link active" id="second-tab" data-target="#panel_b_second, #panel_a_second" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="true">second</a></li> <li class="nav-item"><a class="nav-link" id="third-tab" data-target="#panel_b_thrid, #panel_a_third" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Unser third</a></li> </ul> <div class="tab-content" id="ueberTabB"> <div class="tab-pane fade" id="panel_b_first" role="tabpanel" aria-labelledby="first-tab"> B First </div> <div class="tab-pane fade show active" id="panel_b_second" role="tabpanel" aria-labelledby="second-tab"> B Second </div> <div class="tab-pane fade" id="panel_b_thrid" role="tabpanel" aria-labelledby="third-tab"> B Third </div> </div> </div>