Tabs API

Documentation in progress.

Initialization

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

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-tab] name, if one was set.

• currentIndex gets or sets the 0-based index of the current tab ( i.e. 5 tabs would be numbered 0, 1, 2, 3, 4 ).

• currentNum gets or sets the 1-based index of the current tab ( i.e. 5 tabs would be numbered 1, 2, 3, 4, 5 ).

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

See Slider Code Examples for more.

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>

Examples

For example;

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

These examples assume that;

• You have a Slider

• The Slider has a wfu-slider attribute with a value of slider1

• You have the SA5 library installed

Navigating Tabs

Remember to wrap your code in <script> </script> tags.

First, setup the slider object-

document.addEventListener('DOMContentLoaded', function() { 

  // Initialize SA5 Webflow Tabs
  accordionDemo = new sa5.Sa5Accordion(
    document.querySelector('[wfu-accordion=accordion1]')
  );
  
  // Perform any initial setup
  // e.g. select item #2
  accordionDemo.currentNum = 2;
  
  console.log(accordionDemo);
});

Setup any buttons or other triggers you want, to perform other navigations.

For example, suppose we have a button with an ID of buttonNext and we want it to navigate to the next slide;

// On button click, navigate to next slide 
document.querySelector('#buttonNext').addEventListener('click', function() {
  accordionDemo.goToNext();
});