Automatic Tabs

Use the Refokus Automatic Tabs tool to trigger an automatic sequence through tab components.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How do you create an Automatic Tabs component in Webflow.[.c-title_step]

Use the Refokus Automatic Tabs tool to enhance the behaviour of the native tab component in Webflow, by automatically navigating through the individual tab panes.

[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step] Paste the following script in the “Before tag” field under the “Custom Code” section in the page settings. [.c-text_step]

<script src="https://tools.refokus.com/automatic-tabs/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that means “Add a custom attribute”.

To start, set up your tabs component inside of Webflow. Remember, you are able to use the interactions panel to animate with the animation type: Tab Change to create any transition/animation you want.

Next, we need to add a custom attribute of [.c-tool_tag]r-automatic-tabs=1[.c-tool_tag] on the ‘Tabs Menu’ element inside the component. The attribute value (ie. the ‘=1’) also controls the amount of seconds it takes to automatically change the tab.

Next step, publish the site, and watch your tabs automatically navigate!

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.