How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
Tabs
How To, for Web Applications
By: Chrysanthus Date Published: 19 Mar 2025
Tabs are buttons around the top of a webpage, and when one of them is clicked, a section of the page that was not displayed, is displayed at the screen. Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. This tutorial explains How to Create a Horizontal Tabs Bar with their Sections or web-pages, using CSS and JavaScript.
At the end of this tutorial is the complete code for the webpage. The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the file in the browser. Click the different tabs to appreciate the effects. The reader is advised to do that before continuing to read the rest of this tutorial.
Webpage Skeleton Code
The webpage skeleton code for which more useful code will be added for the project, is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Tabs</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
</script>
</body>
</html>
Any professional webpage should have at least the first four HTML elements (tags) in the HTML head element. The HTML style element in the HTML head element will have all the styles for the tabs, the tab's container, and other containers. The HTML script element will have the JavaScript to display the corresponding section when a tab is clicked. The body element will have all the containers (divs). The container for the tabs is an HTML div element. The containers for the different sections for each tab are HTML div elements. At the end of the HTML body element and within the body tags, will be a JavaScript code that will highlight the default tab and show its corresponding default section, when the website is loaded.
The HTML Body Element
The code for the HTML body element is:
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
The div with class-name, "tab" has the buttons for the tabs. Each tab is an HTML button. The are three different sections corresponding to the three different tabs (buttons): London, Paris and Tokyo which are each in a div, all having the same class-name, "tabcontent" . The JavaScript at the end of the body element will be explained below, as well as more explanations for the other Body elements.
The HTML Style Element
The div that holds the tabs and the other container divs in the body element, are all styled in the HTML style element.
Styling the Tabs Container
The three buttons that form the three tabs are in a div with class-name, "tab" . The CSS rule for this is:
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
The div by default is a block level element. This means that it will extend from the left end of its container to the right end of its container, and any element typed after it, will go below it. The container element for this div is the HTML body element. HTML buttons are by default, inline level elements. This means that when they are typed one after another, they will appear in a line at the browser. The property, "overflow: hidden;" means that if there are many tabs (HTML buttons), the extra ones on the right will be clipped off. The border of the div container is 1px thick and solid, with a dark gray color, #ccc . The background color of this container div is #f1f1f1 (light gray).
Style for all Button Tabs
The code for a tab is actually the HTML button. These buttons are coded in the div element whose class-name is "tab" . This div is in the HTML body element. The CSS rule for these buttons is:
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
cursor: pointer;
width: 130px;
padding: 14px 16px;
font-size: 17px;
text-align: center;
}
"background-color: inherit;" means that the background color for each button is the same as that for their containing div element. So, the only way to recognize a tab button, is from its content text, such as "Tokyo", "Paris" or "London", since the background color for a button is the same as the background color for its containing div element. All buttons are floated left as they are typed in the HTML div element, and each has no border. "cursor: pointer;" means that when the mouse pointer goes over a button, it becomes a hand, as it is fashionable today, instead of having it as a pointer, as it was in the past. The text content of each button is at its center (text-align: center;) . At this point it is assumed that the reader knows the meanings of the properties, "width: 130px;", "padding: 14px 16px;", and "font-size: 17px;" .
Button On-hover Style
The CSS rule when the mouse pointer is over a button (tab) is:
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
The background color of the button becomes #ddd, which is a darker gray than when the button is not on-hover.
Active Tab Style
To create a webpage with tabs, is not a big deal: Have a div element in which there are buttons, these buttons are the tabs, and they will be converted to behave as some kind of hyperlinks, with JavaScript and not with href attributes. When a button is clicked, JavaScript will display (bring up) its corresponding div section under the horizontal tabs bar. Such a button clicked, is said to be active. The CSS rule for an active tab is:
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
When a button is active, its background color becomes #ccc, which is gray darker than when the mouse is over the button.
Style for Tab's Content
There are three div elements in the HTML body element, corresponding to the three different tabs. For the example of this tutorial, each of these divs is called content div (or div content), and each actually has its own readable content, within its div tags. Each of these divs has the same class-name, "tabcontent". They all have the same style. The CSS rule for these divs is:
/* Style the tab content */
div.tabcontent {
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
display: none;
}
When a tab is clicked, JavaScript will display (bring) the corresponding section (div) below the tabs div. The border for each of these divs is "1px solid #ccc;" . Without the property, "border-top: none;" , there would be a double (thicker) border at the top of the section's div and below the tabs div. In order to have only one border there, instead of a double border, the top-border of the section's div is omitted with the property, "border-top: none;", still in the same CSS rule, but typed after the property, "border: 1px solid #ccc;" .
All section divs are not displayed by default, when the webpage (website) is loaded. That is why there is the property "display: none;" in the CSS rule.
JavaScript
There are two JavaScripts for the webpage. The one at the button of the body element is:
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
This is for the first active tab and its first displayed section (div). When the website is loaded into the browser for the first time, this script makes the tab (button) for London active, and also makes the section (div) for London to fill the screen (to be displayed). Clicking a button must not only be done by hand with the mouse. It can also be done internally by code. Note the click() method for the button object in the code.
This script has to be at the bottom of the HTML body element, because all the div elements have to load first (in the browser) before it can act.
JavaScript for Manual Clicking of Tabs
When a tab is clicked with the hand, it should have the active presentation, and its corresponding section (div content) should be displayed under the tabs div. The JavaScript for this is at the HTML head element. It does not have to be anywhere in the HTML body element, because it works (as it is supposed to), only when the website (or webpage) is completely loaded. The script is:
<script type="text/javascript">
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
This script does three operations: It first of all stops the display of all the divs (contents) of London, Paris and Tokyo. This is quickly followed (within a fraction of a section), by the making all the buttons (tabs) inactive (un-highlighted). This is quickly followed (within a fraction of a section), by displaying the section (div) corresponding to the tab that was clicked ("block";) and also highlighting the tab that was clicked (" active").
At this point, the reader should read through the complete code given below.
Optional Feature
The optional feature for this project is to be able to close a tab and its section (its div). The word, "optional" here, means that the feature must not necessarily be added in the project, but if added, the user will appreciate it. Such an optional feature may also be problematic, in the sense that the user may close a tab and its content unintentionally (in that case the user has to be told that he/she has to refresh the webpage). However, the web-developer should know how to code this optional feature.
A span element with 'x' for close, has to be included as content on the right of the text in each button element. When the span element is clicked, it will call the closing (removing) JavaScript function.
Changes in Some Styles
The original text of each button has to be left aligned, and the span element has to be floated right.
HTML Body Content Modification
Each button (tab) in the div with class-name "tab" needs to have an ID, for easy access of the buttons, to close (remove) them. The sections corresponding to the tabs already have their IDs of "London", "Paris", and "Tokyo". They too can be easily accessed for closing (removal). The div for the tabs in the body element becomes:
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London<span style="float:right" onclick="closeBS('defaultOpen', 'London')">x</span></button>
<button class="tablinks" onclick="openCity(event, 'Paris')" id="ParisOpen">Paris<span style="float:right" onclick="closeBS('ParisOpen', 'Paris')">x</span></button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')" id="TokyoOpen">Tokyo<span style="float:right" onclick="closeBS('TokyoOpen', 'Tokyo')">x</span></button>
</div>
Only this div has been modified. The other content divs have not been modified.
Modified JavaScript
The JavaScript in the HTML head element becomes:
<script type="text/javascript">
var bl = true;
function openCity(evt, cityName) {
if (bl == true) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
else
bl = true;
}
function closeBS(id1, id2) {
bl = false;
document.getElementById(id1).style.display = "none";
document.getElementById(id2).style.display = "none";
}
</script>
When the span element is clicked, the associated button also receives a click. When the span element is clicked, the new closeBS() function is called. The new variable bl and the if-construct have been added to the openCity() function for the following reason: If they were not there, as the button tab and corresponding div section are removed, the openCity() function will redisplay the div section that is supposed to have been removed. Read through the code to know the differences and similarities between it and the previous JavaScript.
The Complete Webpage Code
The complete webpage code below, does not include the optional coding feature above.
And there you have it, the complete webpage code on How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript, is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Tabs</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {font-family: Arial;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
cursor: pointer;
width: 130px;
padding: 14px 16px;
font-size: 17px;
text-align: center;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
div.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
<script type="text/javascript">
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but having the extension, .html . Open the file in the browser. Click the different tabs to appreciate the effects.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .NEXT