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 tabgoToLast()
navigates to the last tabgoToPrev()
navigates to the prev tabgoToNext()
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 ofslider1
You have the SA5 library installed
Navigating Tabs
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();
});
Last updated
Was this helpful?