Hi, in this article I will show you, How to Build Vertical Tabs in HTML and CSS and Animated Vertical Tabs in JavaScript.
In this blog post, I will show you How to Create Vertical Tabs in HTML CSS, and JavaScript. Learn to create Animated Vertical Tabs in HTML and JavaScript with indicator arrows.
We will also make the animated vertical tabs responsive using HTML and CSS. Vertical tabs are responsive in the website and vertical tabs are responsive in HTML and JavaScript.
Animated Vertical Tabs in HTML and JavaScript
Important search terms:
- How to create animated vertical tabs in HTML?
- How to create tabs using HTML and CSS JavaScript?
- Responsive HTML CSS javascript vertical tabs for the website.
- Website vertical tabs tutorial 2022.
- How to create vertical tabs with the edge right side?
- Tabs example in HTML with CSS in 2022,
- Tab layout HTML CSS javascript,
- How to build Tabs with indicators arrows?
- how do create a tab using HTML & CSS?
- Can you make multiple tabs in HTML and CSS?
- How do you make a tab vertical?
- HTML tabs example with code,
- How do I create a tab in HTML and CSS?
You can also watch the full video tutorial to build the animated vertical tabs for your website using HTML and CSS.
Now, you will get the source codes of this HTML CSS, and JavaScript project for beginners.
Source Codes (Build Vertical Tabs in HTML and CSS)
The following is the source code of animated Build Vertical Tabs in HTML and CSS.
HTML Source Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="container">
<h1 class = "text">Animated Vertical Tabs </h1>
<p class = "text"></p>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'coding', 'arrow1')" id="defaultOpen">
<i class="fas fa-laptop-code"></i>
Coding
<span id="arrow1" class="arrow fas fa-caret-right"></span>
</button>
<button class="tablinks" onclick="openTab(event, 'wordPress', 'arrow2')">
<i class="fab fa-wordpress"></i>
WordPress <span id="arrow2" class=" arrow fas fa-caret-right"></span>
</button>
<button class="tablinks" onclick="openTab(event, 'videos', 'arrow3')">
<i class="fas fa-video"></i>
Videos
<span id="arrow3" class=" arrow fas fa-caret-right"></span>
</button>
<button class="tablinks" onclick="openTab(event, 'photoshop', 'arrow4')">
<i class="far fa-image"></i>
Photoshop <span id="arrow4" class=" arrow fas fa-caret-right"></span>
</button>
</div>
<div id="coding" class="tabcontent">
<h3>Coding</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo debitis pariatur harum expedita maiores aliquid, iure distinctio voluptas recusandae velit, officia ratione praesentium consequatur rem dolorem maxime architecto consectetur sint?
</p>
</div>
<div id="wordPress" class="tabcontent">
<h3>WordPress</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quae assumenda sit nulla cum quam, nam, vel hic, ex ut nisi aspernatur provident accusamus ratione impedit adipisci maxime. Necessitatibus, aliquam.</p>
</div>
<div id="videos" class="tabcontent">
<h3>Videos</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptates, consequatur, ratione debitis quibusdam autem exercitationem provident, veniam impedit quae mollitia nobis a distinctio cum laborum corporis. Itaque, minus?</p>
</div>
<div id="photoshop" class="tabcontent">
<h3>Photoshop</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non blanditiis voluptates, consequatur, ratione debitis quibusdam autem exercitationem provident, veniam impedit quae mollitia nobis a distinctio cum laborum corporis. Itaque, minus?</p>
</div>
</div>
</body>
</html>
CSS Source Code
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;
min-height: 100vh;
background: linear-gradient(to left, rgb(91, 161, 227), rgb(81, 228, 86));
}
.container{
padding: 30px 40px;
}
/* Style the tab */
.tab {
float: left;
width: 20%;
height: 300px;
margin-top: -12px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
color: black;
padding: 18px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.5s ease-in;
font-size: 17px;
margin: 15px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(91, 161, 227);
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: rgb(88, 88, 88);
color: white;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid rgb(88, 88, 88);
background: #fff;
width: 70%;
height: 300px;
margin-left: 40px;
animation: blinker 0.6s linear;
}
/* animation effects */
@keyframes blinker {
10% { opacity: 0; }
100% { opacity: 1; }
}
.tab .arrow {
color: rgb(88, 88, 88);
float: right;
font-size: 26px;
position: relative;
left: 25px;
}
@media (max-width: 800px) {
.tab {
width: 30% !important;
}
.tabcontent{
width: 61%;
}
}
@media (max-width: 600px) {
.tab, .tabcontent {
width: 100% !important;
margin: 0 auto;
}
.tab button{
width: 100%;
margin: 10px 0px;
padding: 18px 10px;
}
.tab .arrow {
display: none !important;
}
}
.text
{
font-weight: 900;
text-align: center;
}
h1 {
color: rgb(107, 0, 0);
font-size: 50px !important;
}
JavaScript Source Code
Copy and paste the below JavaScript Code at the bottom inside the body section of your HTML file.
<script>
function openTab(evt, Services, arrows) {
var i, tabcontent, tablinks, tabArrow;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tabArrow = document.getElementsByClassName("arrow");
for (i = 0; i < tabArrow.length; i++) {
tabArrow[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(arrows).style.display = "block";
document.getElementById(Services).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
Final Words
In this post, you have learned to create an animated vertical tab section for your website. We have used basic programming languages like HTML and CSS. JavaScript is used to hide and show the content using on Click function. If you have any difficulty just contact me on my YouTube Channel.
