Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a vertical tab menu with CSS and JavaScript?
In this article, we will discuss how to create a vertical tab menu with CSS and JavaScript.
Tabs are containers whose main purpose is to show and navigate through the diverse content of the website. Tabs are commonly used to manage the space and make the website more user?friendly without reloading too many times. The content in these tabs are usually closely related but mutually exclusive.
There are several types of tabs which can be created and used in various cases ?
Horizontal tabs
Horizontal with Secondary Tabs
Frameless Horizontal Tabs
Vertical Tabs
Vertical Tabs with Second Tabs
Vertical tabs also divide the data but are arranged vertically instead. They share all the major characteristics of the horizontal tabs but have better scalability if the number of tabs is higher. Vertical tabs also provide an additional description compartment to summarize the tab's content.
Steps to Create Tabs
Following are the steps to be followed to create tabs with CSS and JavaScript ?
In the body, the tag creates the tab under the div tag which custom data attributes.
Create another div tag to store the content of the tab with the specified id.
Specified data attributes for each content tag to display only one tab of content at a time
Using JavaScript, we can display the content of the tab.
Example.html
In this part, we are building the page's body structure by constructing three buttons (Tab1, Tab2, and Tab3) in vertical direction and three div paragraphs. As you can see from the code below.
TAB First
Tutorialspoint Easy To learn
TAB Second
Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.
Tab Third
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?
Example.css
In this part, Style is added to the page. Styling the width and height of the button, as well as creating a hover effect and altering the background color of the button when you hover over it.
Example.js
In this part, we are constructing a function selectTab and passing tabindex as an argument, as well as adding the style display attribute, so that when you click on the button, the tab content appears on the page. As you can see from the code below.
Complete Example
Tab TAB First
Tutorialspoint Easy To learn
TAB Second
Hyderabad Telangana, Madhapur Above D-Mart 4th Floor.
Tab Third
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magniomnis reiciendis ullam perspiciatis labore obcaecati tenetur vitae eteius voluptate optio saepe porro, officiis quos praesentium enim undesequi?
3K+ Views
