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. 

Approach:

  • 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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        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;
        }
    </style>
</head>
  
<body>
    <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>
  
    <div class="tab-content">
        <div class="tabs__tab active" id="tab_1" data-tab-info>
            <p>Welcome to GeeksforGeek.</p>
  
        </div>
        <div class="tabs__tab" id="tab_2" data-tab-info>
            <p>Hello Everyone.</p>
  
        </div>
        <div class="tabs__tab" id="tab_3" data-tab-info>
            <p>Learn cool stuff.</p>
  
        </div>
    </div>
    <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
                    .querySelector(tab.dataset.tabValue);
  
                tabInfos.forEach(tabInfo => {
                    tabInfo.classList.remove('active')
                })
                target.classList.add('active');
            })
        })
    </script>
</body>
  
</html>

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!