skip to Main Content

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?

Bootstrap docs

<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>

Jsfiddle

2

Answers


    1. On tabs, set attributes data-bs-toggle to collapse.
    2. On content, replace classes tab-pane with collapse.
    3. On content, add data-bs-parent="#myTabContent" attributes, so other content closes, when one opens.
    <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="collapse" 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="collapse" 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="collapse" 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="collapse" id="home-tab-pane" data-bs-parent="#myTabContent" 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="collapse" id="profile-tab-pane" data-bs-parent="#myTabContent" 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="collapse" id="contact-tab-pane" data-bs-parent="#myTabContent" 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>
    Login or Signup to reply.
  1. 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:

     let current = '';
    
      function toggleContent(evt) {
    
        const btn = evt.target;
    
        if (btn.getAttribute('id') === current) {
          const tab = document.querySelector(btn.getAttribute('data-bs-target'))
          tab.classList.toggle('show');
        }
        current = btn.getAttribute('id');
      }
      
      document.querySelectorAll('#myTab button').forEach(el => el.addEventListener('click', toggleContent));
    

    demo:

    <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>
    
    
    <script>
    
      let current = '';
    
      function toggleContent(evt) {
    
        const btn = evt.target;
    
        if (btn.getAttribute('id') === current) {
          const tab = document.querySelector(btn.getAttribute('data-bs-target'))
          tab.classList.toggle('show');
        }
        current = btn.getAttribute('id');
      }
      
      document.querySelectorAll('#myTab button').forEach(el => el.addEventListener('click', toggleContent));
      
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search