Building a Simple Tabs Interface Using Only the JavaScript DOM

Creating an intuitive user interface often involves using tabs to organize content. In this tutorial, we’ll learn how to build a simple tabbed interface using just JavaScript DOM manipulation, without relying on any libraries or frameworks. By following these steps, you’ll gain a deeper understanding of manipulating HTML elements with JavaScript.

HTML Structure

First, let's create the basic HTML structure for our tabs. We'll use a <div> to contain our tabs and panels:

<div class="tabs-container">
  <ul class="tabs-nav">
    <li class="tab active" data-tab="tab1">Tab 1</li>
    <li class="tab" data-tab="tab2">Tab 2</li>
    <li class="tab" data-tab="tab3">Tab 3</li>
  </ul>
  <div class="tabs-content">
    <div id="tab1" class="tab-panel active">
      <p>Content for Tab 1</p>
    </div>
    <div id="tab2" class="tab-panel">
      <p>Content for Tab 2</p>
    </div>
    <div id="tab3" class="tab-panel">
      <p>Content for Tab 3</p>
    </div>
  </div>
</div>

In this structure, we have an unordered list for the tabs navigation. Each tab is assigned a data attribute naming the panel it corresponds to. Our panels are simple <div> elements identified by an ID.

CSS Styling

Let’s add some basic CSS to style our tabs interface.

.tabs-container {
  width: 300px;
  margin: 0 auto;
}
.tabs-nav {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #aaa;
}
.tab {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #aaa;
  border-bottom: none;
  background: #f9f9f9;
}
.tab.active {
  background: #fff;
  font-weight: bold;
}
.tabs-content {
  border: 1px solid #aaa;
  padding: 10px;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

Our CSS creates a horizontal navigation bar for the tabs and ensures that only the active tab panel is displayed by using the .active class.

JavaScript Logic

Now let's implement the JavaScript needed to make our tabs functional.

document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab');
  const panels = document.querySelectorAll('.tab-panel');

  tabs.forEach((tab) => {
    tab.addEventListener('click', function() {
      const targetPanel = document.getElementById(this.getAttribute('data-tab'));

      tabs.forEach((item) => {
        item.classList.remove('active');
      });

      panels.forEach((item) => {
        item.classList.remove('active');
      });

      tab.classList.add('active');
      targetPanel.classList.add('active');
    });
  });
});

This script starts by obtaining all tab elements and panel elements from the DOM. An event listener is attached to each tab element: when a tab is clicked, all tabs and panels are reset to inactive (removing the .active class). The clicked tab and the respective panel then gain the .active class, rendering them as active for the user.

Conclusion

And just like that, we have created a simple and effective tabs interface using only HTML, CSS, and JavaScript. This exercise helps you understand how event listeners and DOM manipulation work together to create dynamic user experiences without third-party dependencies. Try adding more tabs or further styles to see what differing effects you can achieve!