# Accordion API
{% hint style="warning" %}
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.
{% endhint %}
## Initialization
Outside of callback events, you can also access the SA5 Slider object by constructing one explicitly;
```javascript
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](https://attr.sygnal.com/sa5-elements/slider/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
{% hint style="info" %}
Remember to wrap your code in `` tags.
{% endhint %}
First, setup the slider object-
```javascript
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;
```javascript
// On button click, navigate to next slide
document.querySelector('#buttonNext').addEventListener('click', function() {
accordionDemo.goToNext();
});
```
## Events
### accordionChanged
```html
```