Как у bootstrap tabs 5 > версий сделать несколько тел на одну кнопку?

[WebMachine]

Здравствуйте.
Подскажите как получить возможность иметь несколько тел в bootstrap табах?
Нужно:
- Чтобы изначально отображались все тела которые принадлежат первой кнопке.
- Чтобы не было задержки у остальных тел при нажатии на кнопку, все тела должны показываться одновременно.
- Чтобы на одну кнопку можно было назначать N кол-во тел.
- Чтобы якорей не было совсем !!! и при нажатии на кнопку, текущая позиция оставалась неизменной.

Только Vanilla JS

[WebMachine]

цель просто получить несколько тел для bootstrap табов. Без якорей

[Nexus]

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

[WebMachine]

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

это самое vanilное решение?

[Nexus]

WebMachine, ванильнее некуда.

[WebMachine]

WebMachine, ванильнее некуда.

спасибо Нексус) красавчик)