How Do You Style Tabs in Webflow?

Welcome to this tutorial on how to style tabs in Webflow!

What are Tabs?

Tabs are a common user interface element used to display different sections of content within a single area. They allow users to switch between different sections without navigating away from the page. Tabs provide an organized and visually appealing way to present information, making them a popular choice for web designers.

Getting Started

To create stylish tabs in Webflow, you’ll need some basic HTML and CSS knowledge. Let’s start by setting up the HTML structure for our tabs:

<div class="tabs-container">
  <ul class="tab-list">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 2</li>
    <li class="tab">Tab 3</li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane">
      Content for Tab 1
    </div>

    <div class="tab-pane">
      Content for Tab 2
    </div>

    <div class="tab-pane">
      Content for Tab 3
    </div>
  </div>
</div>

The HTML structure consists of a container div (.tabs-container) that holds the tab list (ul.tab-list) and the tab content (div.tab-content). Each tab is represented by an li element with the class .tab, and the content for each tab is enclosed within a div with the class .tab-pane.

Styling the Tabs

Now that we have set up the HTML structure, let’s style our tabs to make them visually appealing:

.tabs-container {
  display: flex;
  flex-direction: column;
}tab-list {
  display: flex;
  list-style-type: none;
  padding: 0;
}tab {
  padding: 10px;
  background-color: #f1f1f1;
  cursor: pointer;
}tab:hover {
  background-color: #e1e1e1;
}tab.active {
  font-weight: bold;
}tab-content {
  padding-top: 10px;
}tab-pane {
  display: none; /* Hide all tab content by default */
}active {
  display: block; /* Show active tab content */
}

In the CSS code above, we use various styling properties to customize the appearance of our tabs. We set the .tabs-container to have a flex-direction of column to stack the tab list and content vertically. The .tab-list is displayed as a flex container with no bullet points (list-style-type) and zero padding.

We add padding and background color to the .tab class for a pleasant visual effect. On hover, we change the background color to give feedback to users.active class is applied to the currently active tab, making it bold using font-weight property.

The .tab-content class adds some top padding to create space between the tab list and content. By default, all .tab-pane elements are hidden with display:none. Finally, we use the .active class to show the content of the active tab by setting its display property to block.

Adding Interactivity

To make our tabs interactive, we’ll need to incorporate some JavaScript code into our project. In Webflow, you can easily add custom code using the HTML Embed element.

<script>
  const tabs = document.querySelectorAll('.tab');
  const tabPanes = document.tab-pane');

  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      // Remove active classes from all tabs and panes
      tabs.forEach(tab => tab.classList.remove('active'));
      tabPanes.forEach(pane => pane.remove('active'));

      // Add active class to the clicked tab and pane
      tab.add('active');
      tabPanes[index].add('active');
    });
  });
</script>

The JavaScript code above adds interactivity to our tabs. It selects all elements with the .tab class and assigns them to the ‘tabs’ variable. Similarly, it selects all elements with the .tab-pane class and assigns them to the ‘tabPanes’ variable.

Next, it loops through each tab using forEach() and adds a click event listener. When a tab is clicked, it removes the ‘active’ class from all tabs and panes to ensure only one is active at a time. Then, it adds the ‘active’ class to the clicked tab and its corresponding pane based on its index in the NodeList.

Conclusion

Congratulations! You have successfully styled your tabs in Webflow.

Tabs are an effective way to organize content and improve user experience on your website. By utilizing HTML, CSS, and JavaScript, you can create visually engaging and interactive tabs that enhance your website’s design.

Feel free to experiment with different CSS properties and styles to customize your tabs further. Happy coding!