How to create tabs containing different content in HTML ?

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:
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.
CSS-Properties
CSS-Questions
HTML-Attributes
HTML-Questions
JavaScript-Methods
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type