Trigger

The trigger element (where you need to click on) where:

• data-bs-target contains the id of the target element (ie the pane) in a id selector form
• aria-selected is set on the default visible target (pane)

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="home-tab" data-bs-target="#home" type="button" role="tab"
                aria-controls="home" aria-selected="false">Home
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="profile-tab" data-bs-target="#profile"
                type="button" role="tab" aria-controls="profile" aria-selected="true">Profile
        </button>
    </li>
</ul>

Target

The panel element that contains the content where:

• aria-labelledby contains the id of the trigger element
• the active class is set on the visible pane

<div class="tab-content">
    <div class="tab-pane" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
    <div class="tab-pane active" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
</div>

HTML element result

The result is below and you can see that the tabs are not responsive. If you click on the other nothing happens because the tab Javascript was not yet instantiated.

data-bs-toggle

By adding:

• data-bs-toggle=“tab”
• or data-bs-toggle=“pill”

bootstrap will automatically add to this element a click callback

Demo: We have added to the triggers element, the data-bs-toggle=“tab” attribute

<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" type="button" role="tab"
                aria-controls="home" aria-selected="false">Home
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                type="button" role="tab" aria-controls="profile" aria-selected="true">Profile
        </button>
    </li>
</ul>

• Result: Now, if you click on a trigger tabs, the old pane hides and the new pane becomes visible

Programmatically

The below code:

• select the triggers element,
• add a click event listener
• build the tab instance if not yet found
• and execute the show method

document.querySelectorAll('#myTab button').forEach(function (triggerEl) {
    triggerEl.addEventListener('click', function (event) {
        let tabTrigger = bootstrap.Tab.getInstance(triggerEl);
        if (tabTrigger == null) {
            tabTrigger = new bootstrap.Tab(triggerEl)
        }
        tabTrigger.show()
    });
});

• Result: Now, if you click on a trigger tabs, the old pane hides and the new pane becomes visible