Animated Tabs with JavaScript

#html #css #javascript #webdev

Hello Everyone Today I will show how you can create custom tabs with SASS and Javascript.

Let's get started...

Codepen -

HTML

<!-- Custom Tabs -->
<div class="tab-btns">
  <button class="tab active-btn" data-tab-btn="1">Basic</button>
  <button class="tab" data-tab-btn="2">Standard</button>
  <button class="tab" data-tab-btn="3">Premium</button>
  <button class="tab" data-tab-btn="4">Ultra</button>
</div>

<!-- Content -->
<div class="container">
  <div class="tab-content active" data-tab-content="1">
    <div class="card b-grey">...</div>
  </div>
 <div class="tab-content" data-tab-content="1">
    <div class="card b-violet">...</div>
  </div>
<div class="tab-content" data-tab-content="1">
    <div class="card b-violet">...</div>
  </div>
<div class="tab-content" data-tab-content="1">
    <div class="card b-violet">...</div>
  </div>
</div>

So I created 4 buttons and they will switch tabs on clicking them
There is a main container and inside it, there are 4 div with the class "tab-content" and each tab container has a card inside it.
The first tab has an active class means it will be visible on page load, we will use this active class to change tabs by setting their class as active and removing the active class from other tabs.

CSS

// All the stylings is in the codepen example in the CSS section

// Main part
.tab-content {
  max-height: 0;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  overflow: hidden;
  transition: all 0.3s linear;
}

.active {
  max-height: 450px;
  padding: 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Initially, All the tabs will have 0 height and overflow hidden, so they will be invisible.
Active class will set the height of tabs and make them visible with some transition effect using clip-path property.

Javascript

const tabBtns = document.querySelector(".tab-btns");

 tabBtns.addEventListener("click", (e) => {
   Array.from(tabBtns.children).forEach(btn => {
     btn.classList.remove("active-btn");
   })
    let activeTab = e.target.getAttribute("data-tab-btn");
    let tabContent = document.querySelectorAll(".tab-content");
    if(activeTab) {
      e.target.classList.add("active-btn");
    Array.from(tabContent).forEach((content) => {
      const activeContent = content.getAttribute("data-tab-content");
      if(activeContent === activeTab){
        content.classList.add("active")
      }
      else{
        content.classList.remove("active")
      }
    });
    }
  });

Attaching an event listener to the button container itself(Event propagation), click will be triggered only if the element has a data-tab-btn class, this will be checked using an if statement(if(activeTab){Rest of the functionality})
Using forEach loop, iterating on each buttons and then again using forEach removing the active-btn class from all the buttons and then setting the active-btn class to the button which is clicked.
Active button will be accessed by the data-tab-btn attribute
Then select all the tab content containers and using forEach loop, iterating them one by one, Active tab content will be accessed by data-tab-content its value should be same as data-tab-btn value.
Inside if statement, we are checking that the data-tab-btn and data-tab-content values are same or not, if it is true add the active class to that tab content, else remove that active class from that tab.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90