How to Create Vertical Tabs Menu with 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 Vertical Tabs Bar with their corresponding Sections.
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>Vertical 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 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 first tab and show its corresponding first section, when the website is loaded.
The HTML Body Content
The content of the body element is:
<h2>Vertical 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>
<br><br><br><br><br><br><br><br><br><br><br><br> text text text <br><br><br><br><br><br> text <br><br><br><br><br><br> Text text <br><br><br><br><br><br>
</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 three different sections corresponding to the three different tabs (buttons): London, Paris and Tokyo 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 Style Element
The buttons for the tabs are connected by the CSS rule, "tablink" and the divs for the corresponding sections are connected by the CSS rule, "tabcontent" . CSS rules are defined in the style element. Remember, a CSS rule is of the value of a class attribute in an HTML element.
The box-sizing Property
At the top within the style element content, is the CSS rule,
* {box-sizing: border-box}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the button elements and the div elements. The box-sizing property means that the width of each element is measured from the left edge of the border to the right edge of the opposite border, instead of from the left edge of the element's content to the right edge of the element's content. The box-sizing property also means that the height of each element is measured from the top edge of the border to the bottom edge of the opposite border, instead of from the top edge of the element's content to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
The body CSS Rule
The CSS rule for the HTML body is:
body {font-family: "Lato", sans-serif;}
If the font, "Lato" is not available, from the browser, then "sans-serif" which is likely available, will be chosen.
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 class is:
/* Style the tab */
div.tab {
width: 30%;
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
height: 300px;
}
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. Since this div is supposed to be the vertical bar (of tabs), it is given a small width. The width is 30% of the width of the screen (body element). The HTML tab elements will be in this div, one below the other; see how below. With the property, "float: left;" the vertical div bar becomes an inline-block element. With that, a div section, corresponding to the button (tab) that is clicked, should appear on the right of the vertical div bar. The vertical div bar has a solid border of 1px thick, and color #ccc (grayish). This bar has a background color of #f1f1f1 (light gray).
Style Common to All Tabs
The CSS rule for styles common to all tab buttons is:
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
text-align: left;
font-size: 17px;
cursor: pointer;
}
HTML buttons are by default, inline level elements. When typed next to one another they appear in a horizontal line. In order to have them displayed below one another, they have to be made block-level elements. The "display: block;" property does that. This property is the main feature to make a menu vertical.
The background color of each button tab is the same as the background color of the parent container div (inherited). The text color is black. The padding for top and bottom is 22px and the padding for right and left is 16px. The width of each button tab is 100%. This means that each will stretch from the left end of the vertical bar to the right end of the vertical bar. Because of the "* {box-sizing: border-box}" property, the left and right padding gaps are included in the 100% width.
There is no border for each tab. However, remember that the vertical bar that has these buttons, has a border, to separate it from the border of the div section that will be on its right (of the vertical bar). The text of each button is left-align. The size of each character of the text is 17px.
The "cursor: pointer;" property means that when the mouse pointer is over a tab, it should be a hand. It is fashionable to have it like that today, than to have it remain as the pointer, as it was in the past.
CSS Rule Common to all div Sections
The CSS rule common to all div sections is:
/* Style the tab content */
div.tabcontent {
width: 70%;
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
border-left: none;
display: none;
}
The selector begins with div because all the sections are div elements. That is followed by a dot. The dot is followed by the class-name common to all the three divs.
At the top of the Style element is the " * {box-sizing: border-box}" property. This means that the width of all containing elements must be measured from the left edge of the border, to the right edge of the opposite border; and the height of all containing elements must be measured from the top edge of the border to the bottom edge of the opposite border. If a containing element has no border, then the measurement should begin from one edge of the padding, to the opposite padding edge.
With that, the width of the vertical div container for the tabs, is 30% of the screen width and floated left. The float property makes it an inline-block element, meaning that another big element can be on its right side. Each div for the document content with class attribute, "class='tabcontent'", is the other big element. Each of these div sections has the screen width of 70% and is also floated left and typed after the div for the tabs. So, each div section, when displayed, will occur next to, and on the right of the tabs div, because they have also become inline-block elements. Remember that the tabs are not floated left; it is their texts that are text-align left.
The top and bottom padding is 0px and the right and left padding is 12px.
The border of each div section is solid and 1px thick, and is of the color, #ccc (grayish). However, its left border is none (does not exists). The reason why the left border of each div section is made none, is so that, the boundary of the two container divs floated left, should not have double thickness, as a result of the box-sizing property.
Remember that the div section is the main document container. So, for long div sections, such as the Paris' div above, no left border is seen for the div section below the div for the tabs. The reader should test the complete code given below, for that.
The display is none. So all the div section elements are not displayed, when the webpage loads (for the first time). When the webpage loads, the tab that is highlighted and the corresponding div section that is made visible (with "display: block;"), was decided upon by the programmer, with the JavaScript code at the bottom of the HTML body.
Tab On-hover
The CSS rule for this is:
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
When the mouse pointer goes over a tab, the background color of the tab becomes #ddd, lighter than the border color, but darker than the background color of the tabs' div. When the mouse pointer is not over the tab, its color is that of the background of the tabs' div.
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 section to the right of the vertical tabs bar. Such a button clicked, is said to be active. The CSS rule for an active tab is:
/* Create an active/current "tab button" 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. #ccc is the same color for the borders of the tabs container and the document's container, in order to blend the border and the highlighted background color.
Remember that the background color of the tabs div (container) is light-gray, while the background color of the div section (document container) is none (defaults to white).
JavaScript
There are two scripts for JavaScript in the webpage. There is one in the HTML head and there is another at the bottom, within the HTML body element. The one in the head element 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>
There are three operations here. The first operation hides all div section elements by giving each the display value of none (should be in double quotes here). This happens for a very short time that is not noticeable by the user. The second operation makes all the tab buttons "inactive" by replacing " active" with "" in the class-name of any button that might have it. This also happens for a very short time that is not noticeable by the user. The last operation of the function above, displays the intended div section, and highlights the tab clicked, by making it "active". The above three operations happen very fast, and the result of the last operation remains.
The script at the bottom of the body element and within its tags, is:
<script type="text/javascript">
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Now, the DOM reference object for an HTML element has the click() method. When called, this method simulates the actual user clicking; though the user does not click. When the click is simulated, the above function is called, and the first tab and first div section chosen by the programmer, are highlighted and displayed respectively.
When the webpage is loaded (for the first time) after all the HTML elements in the body have been established, this one statement JavaScript is evaluated (executed). The one statement cannot instead be in the JavaScript in the HTML head, because the script there is evaluated (executed) the first time (not called) as the page loads, before the HTML elements in the body are established. As a web page loads, all JavaScript, whether in the head element or in the body element, are evaluated (executed) as they are encountered. So the statement cannot be in the script in the head element.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Vertical 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>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
width: 30%;
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
text-align: left;
font-size: 17px;
cursor: pointer;
}
/* Style the tab content */
div.tabcontent {
width: 70%;
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
border-left: none;
display: none;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
</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>Vertical 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>
<br><br><br><br><br><br><br><br><br><br><br><br> text text text <br><br><br><br><br><br> text <br><br><br><br><br><br> Text text <br><br><br><br><br><br>
</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 . . .BACK NEXT