Webflow Tabs

Change Tab Dynamically

No items found.
Overview
How to create CMS-powered tabs
Add Next / Prev Buttons to Tabs
Change Tab Dynamically
Autoplay Tabs
Circular / Orbital Tabs
11:41
401
No items found.

Let's say you want to be able to change the selected tab based on;

  • Something else happening on the page, such as the user clicking on a button.
  • Specific indications in the URL such as ?tab=mango .

Technical

There are at least two ways to change Webflow's tabs.

Either can be triggered by page-load checking the querystring

Javascript Click Approach

Send a click() event to the tab, so that Webflow's javascript acts accordingly.

In this example you'd have a button with the ID my-button, and your tab would have the ID my-tab3.

<script>
$("#my-button").click(function() {
  $("#my-tab3").click();
}); 
</script>

Javascript Class Change Approach

From Timothy Ricks;

<script>
$(function() {
  // Change the 3 to the number tab you want to be active
  $(".your-tab-class").removeClass("w--current");
  $(".your-tab-class:nth-child(3)").addClass("w--current"); 
}); 
</script>

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.