How Do I Create a Vertical Tab in Webflow?

Creating a Vertical Tab in Webflow

When it comes to creating a vertical tab in Webflow, it’s essential to have a clear understanding of the HTML structure and the necessary styling elements. In this tutorial, we will guide you through the step-by-step process of creating an engaging and functional vertical tab using HTML.

Step 1: Setting Up the HTML Structure
To begin, let’s set up the basic HTML structure for our vertical tab. We’ll use a combination of

and

HTML:

Let’s break down the code above:

We start with a container element (in this case, a
) with a class name “vertical-tab”. This will be our main wrapper for the entire vertical tab.
Inside the container, we add an unordered list element (
- Each list item (
- ) represents a tab. We add an anchor element () inside each list item to create a clickable link for the tab. The href attribute points to the corresponding tab content.
- Below the
  Step 2: Applying CSS Styling
  Now that we have set up our HTML structure, let’s apply some CSS styling to make our vertical tabs visually appealing and functional.
  
  CSS:
  
  .vertical-tab {
  display: flex;
  }
  
  .tab-navigation {
  list-style-type: none;
  padding: 0;
  margin-right: 20px;
  }
  
  .tab-navigation li {
  margin-bottom: 10px;
  }
  
  .tab-navigation li a {
  display: block;
  }
  
  .tab-content .active-tab {
  display: block;
  }
  
  .tab-content div {
  display: none;
  }
  
  The above CSS code provides a basic styling for our vertical tabs:
  - We remove default padding and margin from the “tab-navigation” unordered list (
    - The anchor elements () inside each list item are set to display as block elements, ensuring they take up the full width of their parent list items.
    Step 3: Adding Interactivity with JavaScript (Optional)
    If you want to enhance the functionality of your vertical tabs, you can add some JavaScript code to handle tab switching.
    
    JavaScript:
    
    const tabNavigation = document.querySelector(“.tab-navigation”);
    const tabContent = document.querySelectorAll(“.tab-content div”);
    
    tabNavigation.addEventListener(“click”, function(e) {
    if (e.Target.tagName === “A”) {
    const TargetTab = document.getElementById(e.getAttribute(“href”).substring(1));
    
    for (let i = 0; i < tabContent.length; i++) { tabContent[i].classList.remove("active-tab"); } for (let i = 0; i < tabNavigation.children.length; i++) { tabNavigation.children[i].remove("active"); } TargetTab.add("active-tab"); e.parentNode.add("active"); } });
    The JavaScript code above adds a click event listener to the “tab-navigation” unordered list (

Conclusion