Bootstrap - Tab

About

tab in Bootstrap ¹⁾ are composed of:

• two HTML elements:
  • the triggers element: the navigational tab that are clicked
  • the target element: the pane that contains the content
• a javascript object instance ²⁾ that
  • toggles the state of the HTML elements
  • when clicking on a trigger element (a nav tab)
  • to visible and hidden (via the presence or not of the active class)

Steps by Steps

HTML

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.

Javascript

To make the tabs responsive when you click on a trigger element, you need to instantiate a Javascript Bootstrap Tabs object.

Bootstrap gives two ways:

• via the data-bs-toggle
• programmatically

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

Documentation / Reference