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.

<script>

 var Webflow = Webflow || [];

 Webflow.push(function() {

   var tabTimeout;

   clearTimeout(tabTimeout);

   tabLoop();

   function tabLoop() {

     tabTimeout = setTimeout(function() {

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

       if ($next.length) {

         $next.click();

       } else {

         $('.tab-link:first').click();

       }

     }, 3000);

   }

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

     clearTimeout(tabTimeout);

     tabLoop();

   });

 });

</script>

Copy

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.

Preview:

A tongue scraper is is so much better in cleaning your tongue instead of the normal brushing it.

Might also interest you:

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more