How to Build Interactive Tabs With CSS

Building interactive tabs with CSS is a great way to enhance user experience on your website. Tabs allow users to easily switch between different sections of content without leaving the page. This guide will take you through the steps to create interactive tabs using only CSS, making it efficient and straightforward.

Step 1: Basic HTML Structure

To create interactive tabs, start by setting up the basic HTML structure. Here’s a simple example:


<div class="tabs">
  <div class="tab-links">
    <a href="#tab1" class="active">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
  </div>
<div class="tab-content">
    <div id="tab1" class="tab active">
      <h2>Content for Tab 1</h2>
      <p>This is the content for the first tab.</p>
    </div>
<div id="tab2" class="tab">
      <h2>Content for Tab 2</h2>
      <p>This is the content for the second tab.</p>
    </div>
<div id="tab3" class="tab">
      <h2>Content for Tab 3</h2>
      <p>This is the content for the third tab.</p>
    </div>
  </div>
</div>

Step 2: CSS Styling

Next, add CSS to style the tabs. This CSS will manage the layout and appearance of the tabs:


.tabs {
  width: 100%;
  border: 1px solid #ccc;
}
.tab-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-links a {
  flex: 1;
  padding: 10px;
  text-align: center;
  background: #f1f1f1;
  border-right: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}
.tab-links a:last-child {
  border-right: none;
}
.tab-links a.active {
  background: #fff;
  font-weight: bold;
}
.tab-content .tab {
  display: none;
}
.tab-content .tab.active {
  display: block;
}

Step 3: Adding Interactivity with CSS

To make the tabs interactive, you will utilize the `:target` pseudo-class. This allows the active tab and content area to change when a user clicks a tab link. Here’s the updated CSS:


.tabs a:target {
  background: #fff;
  font-weight: bold;
}
.tabs .tab-content .tab {
  display: none;
}
.tabs .tab-content .tab:target {
  display: block;
}

With this CSS, when a user clicks on a tab, the corresponding content will be displayed while hiding the others.

Step 4: JavaScript Enhancement (Optional)

If desired, JavaScript can enhance the functionality by enabling smoother transitions and state management. You can add a script that toggles the active class instead of relying solely on `:target`:


<script>
document.querySelectorAll('.tab-links a').forEach(tab => {
  tab.addEventListener('click', function(e) {
    e.preventDefault();
    
    // Remove active class from all tab links and hide all tab content
    document.querySelectorAll('.tab-links a').forEach(link => link.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(content => content.classList.remove('active'));
    
    // Add active class to the clicked tab link and show corresponding tab content
    this.classList.add('active');
    const tabContent = document.querySelector(this.getAttribute('href'));
    tabContent.classList.add('active');
  });
});
</script>

This script listens for click events on the tab links, then updates the classes to show the relevant content while hiding others

How to Build Interactive Tabs With CSS