<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#" data-tab-pane="#first-1, #first-2, #first-3, #first-4">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#second-1, #second-2, #second-3">Second</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-tab-pane="#third-1, #third-2, #third-3, #third-4, #third-5">Third</a>
    </li>
  </ul>
  
  <div class="tab-content">
    <div class="tab-pane active" id="first-1" role="tabpanel">This</div>
    <div class="tab-pane active" id="first-2" role="tabpanel">Is</div>
    <div class="tab-pane active" id="first-3" role="tabpanel">First</div>
    <div class="tab-pane active" id="first-4" role="tabpanel">Tab</div>
  
    <div class="tab-pane" id="second-1" role="tabpanel">Is</div>
    <div class="tab-pane" id="second-2" role="tabpanel">Second</div>
    <div class="tab-pane" id="second-3" role="tabpanel">One</div>
  
    <div class="tab-pane" id="third-1" role="tabpanel">And</div>
    <div class="tab-pane" id="third-2" role="tabpanel">This</div>
    <div class="tab-pane" id="third-3" role="tabpanel">Is</div>
    <div class="tab-pane" id="third-4" role="tabpanel">Last</div>
    <div class="tab-pane" id="third-5" role="tabpanel">One</div>
  </div>
</div>

<script>

document.addEventListener('DOMContentLoaded', () => {
  const TAB_CONTROL_ACTIVE_CLASS_NAME = 'active';
  const TAB_PANE_ACTIVE_CLASS_NAME = 'active';

  document.querySelectorAll('.tabs').forEach(wrapper => {
    const controls = wrapper.querySelectorAll('.nav-tabs .nav-link[data-tab-pane]');

    controls.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.classList.contains(TAB_CONTROL_ACTIVE_CLASS_NAME)) {
          return;
        }
    
        controls.forEach(item => item.classList.remove(TAB_CONTROL_ACTIVE_CLASS_NAME));
        control.classList.add(TAB_CONTROL_ACTIVE_CLASS_NAME)
    
        wrapper.querySelectorAll(`.tab-pane.${TAB_PANE_ACTIVE_CLASS_NAME}`).forEach(pane => {
          pane.classList.remove(TAB_PANE_ACTIVE_CLASS_NAME);
        });
  
        control.dataset.tabPane?.split(',').forEach(selector => {
          wrapper.querySelector(selector)?.classList.add(TAB_PANE_ACTIVE_CLASS_NAME);
        });
      });
    });

  });
});

</script>