Bootstrap 5 — List Groups and 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 list groups with JavaScript with Bootstrap 5.

JavaScript Behavior

If we add the JavaScript Bootstrap 5 files, we can do more with list groups.

For instance, we can add a navbar that can display some content when we click it.

We can write:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home">Home</a>

      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile">Profile</a>

      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages">Messages</a>

      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings">Settings</a>
    </div>
  </div>

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

      <div class="tab-pane fade" id="list-profile">Proin non libero congue lectus pharetra dictum quis ut eros. Nunc ac eleifend risus. In vitae arcu tincidunt, eleifend velit id, cursus nibh.</div>

      <div class="tab-pane fade" id="list-messages">Vestibulum hendrerit urna dictum, vulputate quam et, faucibus sapien.</div>

      <div class="tab-pane fade" id="list-settings">Suspendisse in mauris non diam facilisis aliquet eget ac nisi.</div>
    </div>
  </div>
</div>

We added a list group as the navigation bar on the left side.

The data-toggle attribute on each a element lets us choose which panel to show on the right side.

The id of the div on the right side should match the value in the data-toggle so that it can open.

Using Data Attributes

We can also just use the data-toggle='list' on an element with the href so that we don’t need JavaScript to display the content when we click on the list group item.

For instance, we can write:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="myList" role="tablist">
      <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home">Home</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile">Profile</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages">Messages</a>
      <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings">Settings</a>
    </div>
  </div>

  <div class="col-8">
    <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">Proin non libero congue lectus pharetra dictum quis ut eros. Nunc ac eleifend risus. In vitae arcu tincidunt, eleifend velit id, cursus nibh.</div>
      <div class="tab-pane" id="messages"> Donec nec elit vel ex pellentesque pellentesque. Sed commodo tellus at enim vulputate ornare.</div>
      <div class="tab-pane" id="settings">Pellentesque vel elit ut libero hendrerit dictum a in dolor.</div>
    </div>
  </div>
</div>

We have the list group with the data-toggle='list' attribute to show the content when we click on the links.

Then on the right side, we created a div with the tab-content class.

id is set to values of the href in the links without the pound sign.

JavaScript Tabs

We can use the bootstrap.Tab constructor to let us show tabs when they’re clicked.

For example, we can write:

const triggerTabList = \[...document.querySelectorAll('.list-tab a')\];
triggerTabList.forEach((triggerEl) => {
  const tabTrigger = new bootstrap.Tab(triggerEl);
  triggerEl.addEventListener('click', (e) => {
    e.preventDefault()
    tabTrigger.show()
  })
})

to do that.

We just add click listeners to all the trigger elements in the list group.

Also, we can show a tab with the show method.

For example, given the following HTML:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home">Home</a>

      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile">Profile</a>

      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages">Messages</a>

      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings">Settings</a>
    </div>
  </div>

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

      <div class="tab-pane fade" id="list-profile">Proin non libero congue lectus pharetra dictum quis ut eros. Nunc ac eleifend risus. In vitae arcu tincidunt, eleifend velit id, cursus nibh.</div>

      <div class="tab-pane fade" id="list-messages">Vestibulum hendrerit urna dictum, vulputate quam et, faucibus sapien.</div>

      <div class="tab-pane fade" id="list-settings">Suspendisse in mauris non diam facilisis aliquet eget ac nisi.</div>
    </div>
  </div>
</div>

Then we can show the last tab with JavaScript by writing:

const lastTabEl = document.querySelector('#list-tab a:last-child')
const lastTab = new bootstrap.Tab(lastTabEl)

lastTab.show()

We get the link for the last tab and pass ghat to the bootstrap.Tab constructor.

Then we call show to show the tab.

Events

List groups also emit a few events.

They’re:

1. hide.bs.tab — emitted when a tab is hiding
2. show.bs.tab — emitted when a tab is showing
3. hidden.bs.tab — emitted when a tab is hidden
4. shown.bs.tab — emitted when a tab is shown

Conclusion

We can use JavaScript to manipulate tabs.