Skip to content
Related Articles

Related Articles

How to create tabs containing different content in HTML ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 06 Aug, 2021
Improve Article
Save Article

Tabs are used to navigate and display different content around the website. We use tabs to manage space and to make the website more attractive. 


  • In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content.  
  •  Create another div tag to store the content of the tab with a specific id.
  •  Specify data attributes for each content tag to display only one tab content at a time.
  • Using JavaScript we can display the content of the tag using its id.

In this article, we have created three tabs Tab-1, Tab-2 and Tab-3. When we click on any specific tab it will display the content of that tab.

Note: For CSS, refer to code under the style tag and for JavaScript refer to code under the script tag.


Example: In this example, we will create tabs containing different content.


<!DOCTYPE html>
<html lang="en">
        body {
            background: rgb(140, 214, 30);
        [data-tab-info] {
            display: none;
        .active[data-tab-info] {
            display: block;
        .tab-content {
            font-size: 30px;
            font-family: sans-serif;
            font-weight: bold;
            color: rgb(82, 75, 75);
        .tabs {
            font-size: 40px;
            color: rgb(255, 255, 255);
            display: flex;
            margin: 0;
        .tabs span {
            background: rgb(28, 145, 38);
            padding: 10px;
            border: 1px solid rgb(255, 255, 255);
        .tabs span:hover {
            background: rgb(29, 185, 112);
            cursor: pointer;
            color: black;
    <div class="tabs">
        <span data-tab-value="#tab_1">Tab-1</span>
        <span data-tab-value="#tab_2">Tab-2</span>
        <span data-tab-value="#tab_3">Tab-3</span>
    <div class="tab-content">
        <div class="tabs__tab active" id="tab_1" data-tab-info>
            <p>Welcome to GeeksforGeek.</p>
        <div class="tabs__tab" id="tab_2" data-tab-info>
            <p>Hello Everyone.</p>
        <div class="tabs__tab" id="tab_3" data-tab-info>
            <p>Learn cool stuff.</p>
    <script type="text/javascript">
        const tabs = document.querySelectorAll('[data-tab-value]')
        const tabInfos = document.querySelectorAll('[data-tab-info]')
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const target = document
                tabInfos.forEach(tabInfo => {

Output:When we click on Tab-1 it is showing the content of Tab-1 same with Tab-2 and Tab-3.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!