How to Create Tab Headers using CSS & JavaScript? Last Updated : 10 May, 2024 Comments Improve Suggest changes Like Article Like Report Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hiding the others. Prerequisites:HTMLCSSJavaScriptSteps to Set up the Project:Create an HTML file with a container for tabs and content.(index.html)Add CSS styles for tab styling.(styles.css)Write JavaScript code to toggle the active tab and display corresponding content.(script.js)Project Structure:Project structure HTML <!DOCTYPE html> <html> <head> <meta name="viewport" HTML="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="navbar"> <img src= "https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="logo"> </div> <p>Tab header using HTML, CSS and JavaScript</p> <div id="gfg" class="tabHTML"> <h1>gfg</h1> <p>gfg Stands for geeksforgeeks.</p> </div> <div id="HTML" class="tabHTML"> <h1>HTML</h1> <p>HyperText Markup Language (HTML) is a scripting language that defines the structure and content of web pages and applications. .</p> </div> <div id="CSS" class="tabHTML"> <h1>CSS</h1> <p>CSS stands for Cascading Style Sheets, and it's a language used to style HTML documents.</p> </div> <div id="Javascript" class="tabHTML"> <h1>Javascript</h1> <p>JavaScript (JS) is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive.</p> </div> <button class="tablink" onclick="openCity('gfg', this, 'rgb(49, 39, 39)')" id="defaultOpen">gfg</button> <button class="tablink" onclick="openCity('HTML', this, 'rgb(153, 100, 111)')"> HTML </button> <button class="tablink" onclick="openCity('CSS', this, 'rgb(10, 90, 31)')">CSS</button> <button class="tablink" onclick="openCity('Javascript', this, 'rgb(83, 62, 25)')"> Javascript </button> <script src="script.js"></script> </body> </html> CSS body { font-family: "Lato", sans-serif; } .navbar { overflow: hidden; background-color: #333; display: flex; justify-content: center; align-items: center; } .navbar img { width: 50px; height: auto; padding: 10px 15px; } .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } .tablink:hover { background-color: #777; } /* Style the tab HTML */ .tabHTML { color: white; display: none; padding: 50px; text-align: center; } #gfg { background-color: rgb(49, 39, 39); } #HTML { background-color: rgb(153, 100, 111); } #CSS { background-color: rgb(10, 90, 31); } #Javascript { background-color: rgb(83, 62, 25); } JavaScript //script.js function openCity(cityName, elmnt, color) { let i, tabHTML, tablinks; tabHTML = document.getElementsByClassName("tabHTML"); for (i = 0; i < tabHTML.length; i++) { tabHTML[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(cityName).style.display = "block"; elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); Output: Comment More infoAdvertise with us Next Article How to Create Tab Headers using CSS & JavaScript? A ayushbhankr3p Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Create Full-Page Tabs using CSS & JavaScript? Tabs are a common UI pattern used to organize content into multiple sections within a single page. In this article, we'll explore how to create full-page tabs using CSS and JavaScript. Full-page tabs allow users to switch between different sections of content while maintaining a clean and intuitive 3 min read How to create a FAQ page using JavaScript ? The frequently Asked Questions (FAQ) section is one of the most important sections of any website, especially if you are providing services. If you want to learn how to make it by yourself then welcome! today we'll learn how to create a FAQ page using JavaScript. Functionalities required in a FAQ pa 6 min read How to hide the table header using JavaScript ? In this article, we will see the methods to hide the table header using JavaScript. There are two approaches that can help to hide a table header with the help of JavaScript. They are discussed below: Using style and display propertyUsing jQuery hide Method Approach 1: Select the header using a CSS 2 min read Create a Health Tracker using HTML CSS & JavaScript In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag 5 min read How to load CSS files using JavaScript? The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link 2 min read How to Create a Style Tag using JavaScript? To create a <style> tag using JavaScript, use the document.createElement() method to create the tag, which allows you to dynamically add elements to the DOM.Syntaxdocument.createElement('style')Example 1: This HTML code dynamically styles a <div> element with a green background and white 1 min read How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na 3 min read How to Change Tabs on Hover with CSS and JavaScript ? In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore diff 4 min read How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a 3 min read How to Create Horizontal and Vertical Tabs using JavaScript ? In this article, we will create Horizontal and Vertical Tabs using JavaScript.Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single-page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs a 7 min read Like