Tabs Element ❺

Interact with Webflow's Tabs Element

Overview

This feature allows you to work with the Webflow tabs element.

Switch tabs programmatically- first, next, prev, and last, or go to a specific tab index
- See the Deck Controller for a nocode control approach
Get the current tab index
Receive JavaScript events when the tab is changed, even if it is changed by code

Demonstration

Check the tabs demonstrations here-

Use Cases

Enhance navigation;

Link a button or other element to your tab element, to trigger navigation to the first, last, next, or previous tab. These elements can be anywhere on your page, including within the tab element. You can have as many of them as you like.
Programmatically navigate the tabs element using JavaScript.

Add dynamic page behaviors;

Do something on your page when a tab is changed.

Attributes

Setup your tabs element using these attributes.

Add the wfu-tabs custom attribute to the a Tab element. Give it a unique name to identify that tabs element uniquely, e.g. tabs1.

This makes the tab element accessible in code, and selectable by the other tabs custom attributes.

The Tabs element name should be unique within the page.

`wfu-tab-default` attribute

Add the wfu-tab-default custom attribute to a specific tab directly. This tab will be automatically selected on page load.

`wfu-tab-name` = ( name )

Optional. Add the wfu-tab-name custom attribute to a specific tab directly. This will enable it to be selected as a named item using a deck controller. Alternatively, the tab number ( 1, 2, 3 ) can be used.

Tab names should be unique within the tabs element. Tab names are a discrete attribute so that they can be CMS bound attributes in the future.

JavaScript API

Events

To receive events from tab changes setup an SA5 callback with the tabChanged event. When called, it will contain the tabs object, and the index of the new tab ( 0-based ).

If you have multiple tabs elements marked with [wfu-tabs], you can assign a unique name, and access it through tabs.name, as in this example;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['tabChanged', 
  (tabs, index) => {
    
    console.log("TAB CHANGED", tabs.name, tabs, index); 

    switch(tabs.name) {
      case "demo1": 
        // A tab was clicked in the Demo 1 tabs element
        // index indicates which tab was clicked ( 0-based )
        break;
      case "demo2": 
        // A tab was clicked in the Demo 2 tabs element
        // index indicates which tab was clicked ( 0-based )
        break;
    }

  }]); 
</script>

Outside of callback events, you can also access the SA5 Tabs object by constructing one;

const tabs = new sa5.WebflowTabs(
    $("[wfu-tabs=demo1]")[0]
);

Once you have this, you can call its methods and properties;

Properties;

name property returns the [wfu-tabs] name, if one was set.
currentIndex returns the 0-based index of the current slide.
currentNum returns the 1-based index.

Methods;

goToFirst() navigates to the first tab
goToLast() navigates to the last tab
goToPrev() navigates to the prev tab
goToNext() navigates to the next tab

For example;

$("#btnFirst").click(function() {
  const tabs = new sa5.WebflowTabs(
    $("[wfu-tabs=demo1]")[0]
  ); 
  tabs.goToFirst();
})

Changelog

2024-Feb-04 - Added nocode navigation support through Deck Controller elements.

2023-Aug-19 - Added tabChanged callback event. Tabs has also been moved into the elements library, and is using our standarized "deck" interface which means the methods and properties here should align with similar deck-type elements such as the Slider.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

STEP 3 - ( OPTIONAL ) Use the API & Callbacks to control the element from your custom code