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

Author:

Introduction

Vertical tabs are an alternative to horizontal tabs. In vertical tabs, the tab buttons are placed on the left, and the content is displayed to the right. Vertical tabs are especially useful for navigation when multiple sections of content need to be presented in a limited space.

In this tutorial, you'll learn how to create vertical tabs using HTML, CSS, and JavaScript. We will ensure the design is modern and responsive for different screen sizes.

Development Steps

  1. Create the HTML Structure: Define the layout with tab buttons on the left and content on the right.
  2. Style the Vertical Tabs Using CSS: Use CSS to style the tabs and arrange them vertically.
  3. Add Interactivity with JavaScript: Use JavaScript to switch between tabs when clicked.
  4. Make the Vertical Tabs Responsive: Ensure the tabs adapt to different screen sizes.

Step 1: Create the HTML Structure

We’ll start by creating the HTML structure for the vertical tabs. The tabs will be represented by buttons, and the content will be shown next to the active tab.

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

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

  • vertical-tab-buttons: Holds the tab buttons that will be stacked vertically.
  • vertical-tab-content: Contains the tab content, with only the active tab’s content visible.
  • data-tab attribute: Used to associate each button with the respective content section.

Step 2: Style the Vertical Tabs Using CSS

Now, we’ll use CSS to arrange the tabs vertically and style them for a clean and modern look.

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

.vertical-tab-container {
    display: flex;
    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;
}

/* Vertical Tab Buttons */
.vertical-tab-buttons {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    border-right: 2px solid #ddd;
    background-color: #f1f1f1;
}

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

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

.tab-button.active {
    background-color: #fff;
    font-weight: bold;
    border-right: 2px solid #fff; /* Indicate the active tab */
}

/* Tab Content */
.vertical-tab-content {
    flex-grow: 1;
    padding: 20px;
}

.tab-content-item {
    display: none;
}

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

Explanation:

  • display: flex: Used to create a two-column layout where the tabs are on the left and the content is on the right.
  • .vertical-tab-buttons { flex-direction: column; }: Arranges the tab buttons in a vertical stack.
  • .tab-button.active { background-color: #fff; }: Highlights the active tab by giving it a white background.
  • .tab-content-item { display: none; }: Hides all tab 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 active state of the tabs and their corresponding content sections.

<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 value from the clicked button to identify which content to display.
  • .classList.add('active'): Activates the clicked tab and its corresponding content section.

Step 4: Make the Vertical Tabs Responsive

To ensure the tabs look good on smaller screens, we’ll modify the layout for mobile devices, stacking the tabs above the content.

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

    .vertical-tab-buttons {
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid #ddd;
        min-width: 100%;
    }

    .tab-button {
        flex: 1;
        text-align: center;
        border-right: none;
        border-bottom: 2px solid #ddd;
    }

    .tab-button.active {
        border-bottom: none;
    }
}

Explanation:

  • @media (max-width: 768px): When the screen width is smaller than 768px, the tabs stack horizontally above the content.
  • .vertical-tab-buttons { flex-direction: row; }: Changes the direction of the tab buttons to horizontal on smaller screens.

Complete Code for Vertical Tabs

Here is the complete code for responsive vertical tabs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Vertical 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;
        }

        .vertical-tab-container {
            display: flex;
            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;
        }

        /* Vertical Tab Buttons */
        .vertical-tab-buttons {
            display: flex;
            flex-direction: column;
            min-width: 150px;
            border-right: 2px solid #ddd;
            background-color: #f1f1f1;
        }

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

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

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

        /* Tab Content */
        .vertical-tab-content {
            flex-grow: 1;
            padding: 20px;
        }

        .tab-content-item {
            display: none;
        }

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

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

            .vertical-tab-buttons {
                flex-direction: row;
                border-right: none;
                border-bottom: 2px solid #ddd;
                min-width: 100%;
            }

            .tab-button {
                flex: 1;
                text-align: center;
                border-right: none;
                border-bottom: 2px solid #ddd;
            }

            .tab-button.active {
                border-bottom: none;
            }
        }
    </style>
</head>
<body>

    <!-- Vertical Tabs HTML structure -->
    <div class="vertical-tab-container">
        <!-- Tab Buttons -->
        <div class="vertical-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="vertical-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, you learned how to create vertical tabs using HTML, CSS, and JavaScript. These tabs are responsive, adapting to different screen sizes. The tab buttons are positioned vertically, and the corresponding content is displayed next to the active tab. On smaller screens, the tabs stack horizontally above the content for a better user experience.

Comments

Post a Comment

Leave Comment