How to Build Vertical Tabs in HTML and CSS | Animated Vertical Tabs in HTML and JavaScript

How to create animated vertical tabs in HTML css javascript
How to create animated vertical tabs in HTML css javascript
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

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 edge right side?
  • Tabs example in HTML with CSS in 2022,
  • Tab layout HTML CSS javascript,
  • How to build Tabs with indicators arrows?
  • how to 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.

How to Build Vertical Tabs in HTML and CSS

Now, you will get the source codes of this HTML CSS and JavaScript project for beginners.

Source Codes

The following are the source code of animated vertical tabs.

HTML Cource 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;
}
How to create vertical tabs using HTML CSS JavaScript
How to create vertical tabs using HTML CSS javascript

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.

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

5 Responses

  1. This is really interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to seeking more of your wonderful post. Also, I have shared your web site in my social networks!

  2. I must thank you for the efforts youve put in penning this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has motivated me to get my very own blog now 😉

  3. Great V I should definitely pronounce, impressed with your web site. I had no trouble navigating through all tabs as well as related info ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or something, web site theme . a tones way for your client to communicate. Nice task..

  4. Currently it sounds like Drupal is the preferred blogging platform out there right
    now. (from what I’ve read) Is that what you’re using on your blog?

Leave a Reply

Your email address will not be published.