Change Active Tab on Click

Allows you to change active Webflow tab by clicking on an element of your choice.

See it in action

Click the button at the bottom of the screen below to see how you can change tabs without actually clicking on the tab link element.

The code

Copy the code below to the before </body> tag of the page you need the functionality on.

‍


<script>

$('.change-trigger').on('click', function (evt) {
    $('.new-active-tab').triggerHandler('click');
    evt.preventDefault();
 
  });
  
</script>

Setting it up

Firstly, we need to set up the basic structure within the Webflow designer. To start, drag in a Webflow tabs element with at least two tab links.
Create the element that you want to trigger the tab change. This can be any element and can be placed anywhere on the page.
Paste the code above in </body> in page settings.
Allocate/create classes for your tab links and your custom tab change trigger. In the snippet above the class change-trigger is applied to the element you want to activate the tab change. new-active-tab is applied to the link that will be made active upon clicking the aforementioned trigger. You can name these classes whatever you like in designer, just make sure you edit the code embed with the names you create.

Adrian Raath

Adrian Raath

See it in action

The code

Setting it up