Bootstrap - Tab

Bootstrap - Tab

About

tab in Bootstrap 1) are composed of:

  • two HTML elements:
  • a javascript object instance 2) 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:

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:

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





Discover More
Card Puncher Data Processing
Tab

tab are a navigational element that permits to navigate from one tabbed page to another in a tabbed dialog box. Each page is a section They follow the same principe than an accordion. You will find...



Share this page:
Follow us:
Task Runner