Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create tabs containing different content in HTML ?

  • Last Updated : 06 Aug, 2021

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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
Recommended Articles
Page :