Is it possible to toggle content in tabs in Bootstrap 5? I mean so that clicking an already open / active tab will deactivate / close the content, so that no tabs are active?
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home: Bacon ipsum dolor amet hamburger brisket chicken drumstick jerky flank bresaola strip steak pork belly shank. Tongue tenderloin porchetta, swine drumstick spare ribs bresaola jowl meatloaf. Drumstick doner shoulder, beef ribs venison andouille
ball tip flank. Kielbasa beef frankfurter, venison swine ball tip picanha doner fatback corned beef ham. Tenderloin leberkas short loin, ham drumstick doner alcatra chislic burgdoggen chicken. Sausage andouille pork belly flank tongue burgdoggen pork
capicola pork chop hamburger short loin rump pork loin shank. Cow boudin jowl, short ribs chicken chislic swine. Pancetta capicola turducken andouille. Porchetta corned beef jowl, buffalo brisket shoulder capicola tail pig shank swine hamburger frankfurter.
Bresaola alcatra chuck fatback turkey filet mignon ham hock flank ground round spare ribs ball tip shank t-bone. Swine pork loin sirloin fatback cow pork chop short loin chicken salami. Chicken chuck shankle flank, turducken short ribs buffalo. Spare
ribs porchetta pig burgdoggen pork loin tongue tri-tip pork chop. Turducken meatball frankfurter spare ribs tongue meatloaf, kevin bresaola pork chop short loin fatback leberkas beef ribs brisket. Kevin chuck pork pig, prosciutto picanha shankle burgdoggen
t-bone ball tip beef. Bresaola picanha brisket porchetta tri-tip chislic doner tongue short loin filet mignon flank leberkas andouille landjaeger.</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile: Bacon ipsum dolor amet hamburger brisket chicken drumstick jerky flank bresaola strip steak pork belly shank. Tongue tenderloin porchetta, swine drumstick spare ribs bresaola jowl meatloaf. Drumstick doner shoulder, beef ribs venison andouille
ball tip flank. Kielbasa beef frankfurter, venison swine ball tip picanha doner fatback corned beef ham. Tenderloin leberkas short loin, ham drumstick doner alcatra chislic burgdoggen chicken. Bresaola alcatra chuck fatback turkey filet mignon ham
hock flank ground round spare ribs ball tip shank t-bone. Swine pork loin sirloin fatback cow pork chop short loin chicken salami. Chicken chuck shankle flank, turducken short ribs buffalo. Spare ribs porchetta pig burgdoggen pork loin tongue tri-tip
pork chop. Turducken meatball frankfurter spare ribs tongue meatloaf, kevin bresaola pork chop short loin fatback leberkas beef ribs brisket. Kevin chuck pork pig, prosciutto picanha shankle burgdoggen t-bone ball tip beef. Bresaola picanha brisket
porchetta tri-tip chislic doner tongue short loin filet mignon flank leberkas andouille landjaeger.</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact: Bacon ipsum dolor amet hamburger brisket chicken drumstick jerky flank bresaola strip steak pork belly shank. Tongue tenderloin porchetta, swine drumstick spare ribs bresaola jowl meatloaf. Drumstick doner shoulder, beef ribs venison andouille
ball tip flank. Kielbasa beef frankfurter, venison swine ball tip picanha doner fatback corned beef ham. Tenderloin leberkas short loin, ham drumstick doner alcatra chislic burgdoggen chicken. Sausage andouille pork belly flank tongue burgdoggen pork
capicola pork chop hamburger short loin rump pork loin shank. Cow boudin jowl, short ribs chicken chislic swine. Pancetta capicola turducken andouille. Porchetta corned beef jowl, buffalo brisket shoulder capicola tail pig shank swine hamburger frankfurter.
Bresaola alcatra chuck fatback turkey filet mignon ham hock flank ground round spare ribs ball tip shank t-bone. Swine pork loin sirloin fatback cow pork chop short loin chicken salami. Chicken chuck shankle flank, turducken short ribs buffalo. Spare
ribs porchetta pig burgdoggen pork loin tongue tri-tip pork chop. Turducken meatball frankfurter spare ribs tongue meatloaf, kevin bresaola pork chop short loin fatback leberkas beef ribs brisket. Kevin chuck pork pig, prosciutto picanha shankle burgdoggen
t-bone ball tip beef. Bresaola picanha brisket porchetta tri-tip chislic doner tongue short loin filet mignon flank leberkas andouille landjaeger.</div>
</div>
2
Answers
data-bs-toggle
tocollapse
.tab-pane
withcollapse
.data-bs-parent="#myTabContent"
attributes, so other content closes, when one opens.As a quick-and-dirty solution, I’d add a click listener to show/hide tab (remove
show
class from tab) when the same link is clicked:demo: