JavascriptHow-ToBeginner · 4 min read

How to Create Tabs in JavaScript: Simple Guide with Example

To create tabs in JavaScript, use HTML buttons or links for tab headers and content sections for each tab. Add event listeners to switch visible content by toggling CSS classes like active when a tab is clicked.

📐

Syntax

Tabs are created using HTML elements for tab headers and content areas. JavaScript listens for clicks on tab headers and shows the matching content by adding or removing CSS classes.

tabButtons: Elements that act as clickable tabs.
tabContents: Sections that hold content for each tab.
classList.add('active'): Shows the selected tab and content.
classList.remove('active'): Hides other tabs and content.

html

<!-- HTML structure for tabs -->
<div class="tabs">
  <button class="tab-button active" data-tab="1">Tab 1</button>
  <button class="tab-button" data-tab="2">Tab 2</button>
  <button class="tab-button" data-tab="3">Tab 3</button>
</div>

<div class="tab-content active" data-tab="1">Content for Tab 1</div>
<div class="tab-content" data-tab="2">Content for Tab 2</div>
<div class="tab-content" data-tab="3">Content for Tab 3</div>

<!-- JavaScript to switch tabs -->
<script>
  const tabButtons = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabNumber = button.getAttribute('data-tab');

      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      button.classList.add('active');
      document.querySelector(`.tab-content[data-tab="${tabNumber}"]`).classList.add('active');
    });
  });
</script>

💻

Example

This example shows three tabs. Clicking a tab button highlights it and shows its content while hiding others.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Tabs Example</title>
<style>
  .tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #eee;
    margin-right: 5px;
  }
  .tab-button.active {
    background-color: #ddd;
    font-weight: bold;
  }
  .tab-content {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    margin-top: 5px;
  }
  .tab-content.active {
    display: block;
  }
</style>
</head>
<body>

<div class="tabs">
  <button class="tab-button active" data-tab="1">Tab 1</button>
  <button class="tab-button" data-tab="2">Tab 2</button>
  <button class="tab-button" data-tab="3">Tab 3</button>
</div>

<div class="tab-content active" data-tab="1">This is content for Tab 1.</div>
<div class="tab-content" data-tab="2">Here is content for Tab 2.</div>
<div class="tab-content" data-tab="3">And this is content for Tab 3.</div>

<script>
  const tabButtons = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabNumber = button.getAttribute('data-tab');

      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      button.classList.add('active');
      document.querySelector(`.tab-content[data-tab="${tabNumber}"]`).classList.add('active');
    });
  });
</script>

</body>
</html>

Output

When opened in a browser, three tab buttons appear. Clicking each button highlights it and shows its content below, hiding the others.

⚠️

Common Pitfalls

Common mistakes when creating tabs include:

Not removing the active class from other tabs and contents, causing multiple tabs to appear active.
Forgetting to match the data-tab attributes between buttons and content sections.
Not adding event listeners properly, so clicks do nothing.
Using inline styles instead of CSS classes, which makes toggling visibility harder.

javascript

<!-- Wrong way: Missing removal of active class -->
<script>
  const tabButtons = document.querySelectorAll('.tab-button');
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Only adds active, never removes from others
      button.classList.add('active');
    });
  });
</script>

<!-- Right way: Remove active from all before adding -->
<script>
  const tabButtons = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));
      button.classList.add('active');
      const tabNumber = button.getAttribute('data-tab');
      document.querySelector(`.tab-content[data-tab="${tabNumber}"]`).classList.add('active');
    });
  });
</script>

📊

Quick Reference

Tips for creating tabs in JavaScript:

Use data- attributes to link tabs and content.
Toggle CSS classes like active to show/hide content.
Add event listeners to tab buttons for click events.
Keep HTML, CSS, and JavaScript separate for clarity.

✅

Key Takeaways

Use HTML buttons with matching data attributes to create tab headers and content sections.

Add click event listeners in JavaScript to toggle the active class for showing the correct tab content.

Always remove the active class from all tabs and contents before activating the selected one.

Use CSS classes to control visibility and styling instead of inline styles.

Keep your code organized by separating structure (HTML), style (CSS), and behavior (JavaScript).