Bootstrap 5 — Manipulating Tabs with JavaScript

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to manipulate navs with JavaScript with Bootstrap 5.

Using Data Attributes

We can add the data-toggle='tab' to add the links to show content when we click it.

For example, we can write:

<ul class="nav nav-tabs" id="tab">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" >Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" >Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

  <div class="tab-pane" id="profile"> Nam at neque orci. In vehicula metus eu euismod rhoncus.</div>

  <div class="tab-pane" id="messages">Pellentesque pharetra ligula sed efficitur ultricies. </div>

  <div class="tab-pane" id="settings">Quisque et congue metus, id rutrum purus. </div>
</div>

We have the data-toggle attribute set to tab to make the links open content.

JavaScript

We can add click listeners to tabs with the addEventListener method.

For example, we can write:

const triggerTabList = [...document.querySelectorAll('#myTab a'];
triggerTabList.forEach((triggerEl) => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', (e) => {
    e.preventDefault()
    tabTrigger.show()
  })
})

We create the tab objects with the bootstrap.Tab constructor.

Then we attach click listeners to them with the addEventListener method.

Then we call show inside the click listener callback to show the content.

Fade Effect

We can add a fade effect to each .tab-pane with the .fade class.

For example, we can write:

<ul class="nav nav-tabs" id="tab">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" >Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" >Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade active" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

  <div class="tab-pane fade" id="profile"> Nam at neque orci. In vehicula metus eu euismod rhoncus.</div>

  <div class="tab-pane fade" id="messages">Pellentesque pharetra ligula sed efficitur ultricies. </div>

  <div class="tab-pane fade" id="settings">Quisque et congue metus, id rutrum purus. </div>
</div>

After adding the .fade class, we’ll see the fade effect when we click on the tab links.

In addition to the show method, there’s also the dispose method to destroys an element’s tav.

getInstance gets the tab instance.

Events

Tabs fire a few events.

hide.bs.tab is emitted on the currently active tab when we hide it.

show.bs.tab is emitted on the to be shown tab when we click on it.

hidden.bs.tab is emitted on the previous active tab is we hid that tab.

shown.bs.tab is emitted when we’ve shown the newly active tab.

Conclusion

We can manipulate tabs with JavaScript.

They can be shown or hidden.

And we can listen to various events emitted.