Accordion API

Because accordions are a card deck UX, they use use SA5's card deck controller interface for the JS API ( first, last, next, prev, open item #... ). However this API is not fully implemented yet on the Accordion element.

Initialization

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

const accordion = new sa5.Sa5Accordion(
    document.querySelector('[wfu-accordion=demo1]') // any properly-tagged element
);

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

Properties

• name property returns the [wfu-accordion] name, if one was set.

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

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

Methods

• goToFirst() navigates to the first slide

• goToLast() navigates to the last slide

• goToPrev() navigates to the prev slide

• goToNext() navigates to the next slide

See Slider Code Examples for more.

Examples

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 Slides

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();
});

Events

accordionChanged

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['accordionChanged', 
  (accordion, index) => {
    
    console.log("ACCORDION CHANGED", accordion.name, accordion, index); 

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

  }]); 
</script>