Webflow Tabs

Change Tab Dynamically

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.
Published
July 8, 2023
in lightbox

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.

Javascript Class Change Approach

From Timothy Ricks;

Table of Contents
Comments
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.