Bootstrap Tabs: How to close a tab from a button within a tab-content pane? Need help from the CSS Pros

I have the following use case with Bootstrap Tabs:

I would like to start a page with all tabs closed.

image934×212 3.47 KB

On the Link element I deleted the active class and changed aria-selected="true" to false:

<li class="nav-item">
    <a class="nav-link" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="false">Home</a>
</li>

On the content element I deleted the class show active:

<div class="tab-pane fade" id="navTabs1_1" role="tabpanel">
  <p>Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p>
</div>

So far so good. Now my problem: How can I close the tab from a button inside a tab content pane on click so that I have all closed again?

image1214×468 43.8 KB