How to Create Responsive Tabs Using HTML, CSS, and JavaScript

Author:

Introduction

Tabs are a great way to organize content on a web page by separating sections into multiple panels. Users can click on a tab to view the corresponding content, keeping the page clean and easy to navigate. In this tutorial, you'll learn how to create a responsive and modern-looking tabbed interface using HTML, CSS, and JavaScript.

Development Steps

  1. Create the HTML Structure: Define the layout for the tab buttons and content sections.
  2. Style the Tabs Using CSS: Style the tab buttons and content to ensure a modern and responsive design.
  3. Add Interactivity Using JavaScript: Use JavaScript to switch between tabs when clicked.
  4. Make the Tabs Responsive: Ensure the tabs look good and function properly on all devices.

Step 1: Create the HTML Structure

We'll start by creating a basic structure for the tabs. Each tab will have a corresponding content section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Tabs Example</title>
</head>
<body>

    <!-- Step 1: Tabs HTML structure -->
    <div class="tab-container">
        <!-- Tab Buttons -->
        <div class="tab-buttons">
            <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>

        <!-- Tab Content -->
        <div class="tab-content">
            <div class="tab-content-item active" id="tab-1">
                <h2>Content 1</h2>
                <p>This is the content for Tab 1.</p>
            </div>
            <div class="tab-content-item" id="tab-2">
                <h2>Content 2</h2>
                <p>This is the content for Tab 2.</p>
            </div>
            <div class="tab-content-item" id="tab-3">
                <h2>Content 3</h2>
                <p>This is the content for Tab 3.</p>
            </div>
        </div>
    </div>

</body>
</html>

Explanation:

  • div.tab-buttons: Contains the buttons that act as the tabs.
  • div.tab-content: Contains the content for each tab, with one visible at a time.
  • data-tab attribute: Associates each button with its respective content.

Step 2: Style the Tabs Using CSS

Next, we’ll use CSS to style the tab buttons and content. We’ll also ensure that only the active tab’s content is visible.

/* Step 2: Basic styles for the tabs */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    padding: 20px;
}

.tab-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tab-buttons {
    display: flex;
    justify-content: space-around;
    background-color: #f1f1f1;
    border-bottom: 2px solid #ddd;
}

.tab-button {
    padding: 15px 20px;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1;
    text-align: center;
    font-size: 16px;
}

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

.tab-button.active {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    font-weight: bold;
}

.tab-content {
    padding: 20px;
}

.tab-content-item {
    display: none;
    padding: 20px;
}

.tab-content-item.active {
    display: block;
}

Explanation:

  • .tab-buttons { display: flex; }: Creates a flexible row layout for the tab buttons.
  • .tab-button.active { background-color: #fff; }: Styles the active tab to look connected to its content.
  • .tab-content-item { display: none; }: Hides all content sections by default.
  • .tab-content-item.active { display: block; }: Shows the active tab’s content.

Step 3: Add Interactivity Using JavaScript

Now, we’ll use JavaScript to toggle the tabs' active states and display the associated content when a tab is clicked.

<script>
    // Get all tab buttons and content sections
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContentItems = document.querySelectorAll('.tab-content-item');

    // Add event listeners to each tab button
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const tabId = button.getAttribute('data-tab');

            // Remove the active class from all tab buttons and content items
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContentItems.forEach(content => content.classList.remove('active'));

            // Add the active class to the clicked button and the corresponding content
            button.classList.add('active');
            document.getElementById(`tab-${tabId}`).classList.add('active');
        });
    });
</script>

Explanation:

  • getAttribute('data-tab'): Retrieves the data-tab attribute of the clicked button to identify which tab content to show.
  • .classList.add('active'): Adds the active class to the clicked tab button and its corresponding content section.

Step 4: Make the Tabs Responsive

We’ll now make sure the tabs are fully responsive and look great on all screen sizes.

/* Responsive styles */
@media (max-width: 768px) {
    .tab-buttons {
        flex-direction: column;
    }

    .tab-button {
        text-align: center;
        padding: 10px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tab-button {
        font-size: 12px;
        padding: 8px;
    }
}

Explanation:

  • @media (max-width: 768px): On tablets or smaller screens, the tab buttons stack vertically.
  • @media (max-width: 480px): On mobile devices, the text size and padding are reduced for better fit.

Complete Code with Modern UI and Responsiveness

Here is the complete code for responsive tabs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Tabs Example</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f7f7f7;
            padding: 20px;
        }

        .tab-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .tab-buttons {
            display: flex;
            justify-content: space-around;
            background-color: #f1f1f1;
            border-bottom: 2px solid #ddd;
        }

        .tab-button {
            padding: 15px 20px;
            background-color: #f1f1f1;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            flex: 1;
            text-align: center;
            font-size: 16px;
        }

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

        .tab-button.active {
            background-color: #fff;
            border-bottom: 2px solid #fff;
            font-weight: bold;
        }

        .tab-content {
            padding: 20px;
        }

        .tab-content-item {
            display: none;
            padding: 20px;
        }

        .tab-content-item.active {
            display: block;
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .tab-buttons {
                flex-direction: column;
            }

            .tab-button {
                text-align: center;
                padding: 10px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .tab-button {
                font-size: 12px

;
                padding: 8px;
            }
        }
    </style>
</head>
<body>

    <!-- Tabs HTML structure -->
    <div class="tab-container">
        <!-- Tab buttons -->
        <div class="tab-buttons">
            <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>

        <!-- Tab content sections -->
        <div class="tab-content">
            <div class="tab-content-item active" id="tab-1">
                <h2>Content 1</h2>
                <p>This is the content for Tab 1.</p>
            </div>
            <div class="tab-content-item" id="tab-2">
                <h2>Content 2</h2>
                <p>This is the content for Tab 2.</p>
            </div>
            <div class="tab-content-item" id="tab-3">
                <h2>Content 3</h2>
                <p>This is the content for Tab 3.</p>
            </div>
        </div>
    </div>

    <!-- JavaScript for tab functionality -->
    <script>
        // Get all tab buttons and content sections
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContentItems = document.querySelectorAll('.tab-content-item');

        // Add event listeners to each tab button
        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');

                // Remove the active class from all tab buttons and content items
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContentItems.forEach(content => content.classList.remove('active'));

                // Add the active class to the clicked button and the corresponding content
                button.classList.add('active');
                document.getElementById(`tab-${tabId}`).classList.add('active');
            });
        });
    </script>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, we created a responsive tabbed interface using HTML, CSS, and JavaScript. We ensured that the tabs are functional, modern-looking, and responsive across different screen sizes, making them suitable for desktop and mobile devices. You can further customize the design by adding more styles or animations based on your project needs.

Comments

Post a Comment

Leave Comment