White Arrow icon
Back to all Elements

Auto change tabs

A script to automatically switch between tabs in a loop.

As before, this element need 2 steps:

1. Add the next script tot the relevant page, where your tabs are.


 var Webflow = Webflow || [];

 Webflow.push(function() {

   var tabTimeout;



   function tabLoop() {

     tabTimeout = setTimeout(function() {

       var $next = $('.tabs-menu').children('.w--current:first').next();

       if ($next.length) {


       } else {



     }, 3000);


   $('.tab-link').click(function() {







2. Adjust classnames to match. You can change the classnames in the script or the classnames of the elements in your page:

  • 'tabs-menu' is the classname of the wrapping menu links element (the one that says 'Tabs Menu').
  • 'tab-link' is the classname of the actual links to the tabs.

* You can change the timing between each tab, now set to 3000ms (3 sec.) by changing the number 3000 to any other milliseconds number.

** The last part of this script is a function that resets the "timer" when a 'tab-link' is clicked.


browser mockup
Heart icon

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
Blue arrow iconWhite Arrow icon

Dynamic Height


A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Desktop Grid, Mobile Slider


Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
Blue arrow iconWhite Arrow icon