Confused? Create JS Tabs in 3 Simple Steps for 2025

Alright, let's get to the fun part. We'll build our tabs from the ground up, starting with the structure.

Step 1: The HTML Structure (The Skeleton)

A good tab component consists of two main parts: the tab controls (the buttons you click) and the tab panels (the content that is shown/hidden). We need a way to link each control to its corresponding panel. The most robust way to do this is with data-* attributes.

Here's a clean, semantic structure. Notice how each button's data-tab-target attribute uses a CSS selector (#panel-1) to point to the ID of its content panel.

<div class="tabs-container">
  <ul class="tab-list">
    <li class="tab-control active" data-tab-target="#panel-1">Profile</li>
    <li class="tab-control" data-tab-target="#panel-2">Settings</li>
    <li class="tab-control" data-tab-target="#panel-3">Billing</li>
  </ul>

  <div class="tab-content">
    <div id="panel-1" class="tab-panel active">
      <h4>Profile Information</h4>
      <p>This is the content for the user's profile...</p>
    </div>
    <div id="panel-2" class="tab-panel">
      <h4>Account Settings</h4>
      <p>Here you can change your password and notification preferences...</p>
    </div>
    <div id="panel-3" class="tab-panel">
      <h4>Billing Details</h4>
      <p>View your payment history and current subscription...</p>
    </div>
  </div>
</div>
    

We've preemptively added an active class to the first tab and its panel. This sets the default state when the page loads.

Step 2: The CSS Styling (The Look)

Now, let's make our structure look like actual tabs. The key here is to hide all panels by default and then use the .active class to show the selected one.

/* Basic container styling */
.tabs-container {
  width: 100%;
  max-width: 600px;
  margin: 2rem auto;
  font-family: sans-serif;
}

/* Style for the list of tab controls */
.tab-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #ccc;
}

/* Style for each individual tab control */
.tab-control {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  position: relative;
  bottom: -2px; /* Aligns with the container's bottom border */
}

.tab-control:hover {
  background-color: #ddd;
}

/* Style for the ACTIVE tab control */
.tab-control.active {
  background-color: #fff;
  border-bottom: 2px solid #fff; /* Creates the 'cutout' effect */
  font-weight: bold;
}

/* The container for all panels */
.tab-content {
  border: 2px solid #ccc;
  padding: 20px;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

/* CRITICAL: Hide all panels by default */
.tab-panel {
  display: none;
}

/* CRITICAL: Show the active panel */
.tab-panel.active {
  display: block;
}
    

The magic happens with display: none; and display: block;. Our JavaScript will simply toggle the .active class to control which panel is visible.

Step 3: The JavaScript Magic (The Brains)

This is where we bring our tabs to life. The logic is straightforward: when a tab control is clicked, we need to update the active classes on both the controls and the panels.

Here's the plan:

1. Select all tab controls.
2. Add a click event listener to each one.
3. When a tab is clicked:
• Find the target panel using its data-tab-target attribute.
• First, remove the active class from ALL tabs and ALL panels. This is a crucial reset step.
• Then, add the active class to the tab that was just clicked and its corresponding panel.

document.addEventListener('DOMContentLoaded', () => {
  // Select all elements with the class 'tab-control'
  const tabControls = document.querySelectorAll('.tab-control');

  // Add a click event listener to each tab control
  tabControls.forEach(clickedTab => {
    clickedTab.addEventListener('click', () => {
      // 1. Get all tab controls and panels
      const allTabs = document.querySelectorAll('.tab-control');
      const allPanels = document.querySelectorAll('.tab-panel');

      // 2. Remove 'active' class from all tabs and panels (the reset)
      allTabs.forEach(tab => tab.classList.remove('active'));
      allPanels.forEach(panel => panel.classList.remove('active'));

      // 3. Add 'active' class to the clicked tab
      clickedTab.classList.add('active');

      // 4. Find and activate the corresponding tab panel
      const targetPanelId = clickedTab.dataset.tabTarget;
      const targetPanel = document.querySelector(targetPanelId);
      if (targetPanel) {
        targetPanel.classList.add('active');
      }
    });
  });
});
    

And that's it! With this code, your tabs are fully functional.

<div class="tabs-container">
  <ul class="tab-list" role="tablist">
    <li class="tab-control active" role="tab" aria-selected="true" aria-controls="panel-1" data-tab-target="#panel-1">Profile</li>
    <li class="tab-control" role="tab" aria-selected="false" aria-controls="panel-2" data-tab-target="#panel-2">Settings</li>
    <li class="tab-control" role="tab" aria-selected="false" aria-controls="panel-3" data-tab-target="#panel-3">Billing</li>
  </ul>

  <div class="tab-content">
    <div id="panel-1" class="tab-panel active" role="tabpanel">
      <!-- Content -->
    </div>
    <div id="panel-2" class="tab-panel" role="tabpanel">
      <!-- Content -->
    </div>
    <div id="panel-3" class="tab-panel" role="tabpanel">
      <!-- Content -->
    </div>
  </div>
</div>
    

// ... inside the event listener ...

// 2. Remove 'active' class and set aria-selected to false for all tabs
allTabs.forEach(tab => {
  tab.classList.remove('active');
  tab.setAttribute('aria-selected', 'false');
});

allPanels.forEach(panel => panel.classList.remove('active'));

// 3. Add 'active' class and set aria-selected to true for the clicked tab
clickedTab.classList.add('active');
clickedTab.setAttribute('aria-selected', 'true');

// ... rest of the code is the same ...
    

<!-- Full code would be here, but is omitted for brevity. See the sections above. -->