How to Build Interactive Tabs With CSS and JavaScript

Creating interactive tabs on your website enhances user experience by allowing visitors to navigate content seamlessly. In this article, we will walk you through the steps to build interactive tabs using CSS and JavaScript.

Step 1: HTML Structure

To start, you need a simple HTML structure to hold the tabs and their corresponding content. Here’s a basic example:


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

This structure includes a container for the tabs and a separate section for the content corresponding to each tab. Each button in the tabs has a data attribute that matches the id of the content it controls.

Step 2: CSS Styling

Next, we’ll style the tabs to make them visually appealing. Here’s some example CSS:


.tab-container {
    width: 100%;
    border: 1px solid #ccc;
}
.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
}
.tab-button {
    padding: 10px 20px;
    border: none;
    background: #f1f1f1;
    cursor: pointer;
}
.tab-button.active {
    background: white;
    border-bottom: 2px solid #007bff;
}
.tab-content .tab {
    display: none;
    padding: 20px;
}
.tab-content .tab.active {
    display: block;
}

This CSS will make the tabs horizontal and change the appearance of the active tab. The content of the inactive tabs will be hidden.

Step 3: JavaScript Functionality

Now that the structure and styling are in place, it's time to implement the interactive functionality using JavaScript. Here’s the code you can use:


const tabButtons = document.querySelectorAll('.tab-button');
const tabs = document.querySelectorAll('.tab');
tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        const activeButton = document.querySelector('.tab-button.active');
        const activeTab = document.querySelector('.tab.active');
activeButton.classList.remove('active');
        activeTab.classList.remove('active');
button.classList.add('active');
        document.getElementById(button.getAttribute('data-tab')).classList.add('active');
    });
});

This JavaScript code enables the functionality of the tabs. When a tab button is clicked, it removes the 'active' class from the current tab and content, then applies the 'active' class to the clicked tab and the associated content.

Conclusion

By following these steps, you can build interactive tabs that improve the usability and aesthetics of your website. Customize the styles and content according to your needs, and enjoy a more engaging user experience!

How to Build Interactive Tabs With CSS and JavaScript