By default, the JS will react to the class `Vlt-accordion` and, on click of `Vlt-accordion__trigger`, it will open the corresponding `Vlt-accordion__content`.

If you need more fine tuning:

```javascript
//Element is the Vlt-accordion element
var defaultAccordion = Volta.accordion.create(Element); 

//You can choose to toggle the accordion yourself, by passing true as the second parameter
var defaultAccordion = Volta.accordion.create(Element, true); 
//when toggling the accordion you need to pass the Vlt-accordion__trigger that was clicked as the parameter
defaultAccordion.toggle(Element);
```

And this is for the unstyled accordions:

```javascript
//Element is the Vlt-js-accordion__content element
var jsAccordion = Volta.accordion.create(Element); 

//You can choose to toggle the accordion yourself, by passing true as the second parameter
var jsAccordion = Volta.accordion.create(Element, true); 
jsAccordion.toggle();
```
<hr>

### Unstyled

Unstyled accordions do not need to have the trigger and content adjacent to eachother (hence why they're flexible) so long as you apply the `Vlt-js-accordion` class to the trigger and the `data-trigger` attribute on the content, they can be places anywhere on the page. You also DO NOT need the containing `Vlt-accordion` class.

<hr>

# Reference table

<div class="Vlt-table Vlt-table--data">
|Class |	Behaviour|
|---|---|
|`data-accordion`| The id of the accordion, which must have Vlt-js-accordion__content class |
|`.Vlt-accordion`| Wraps the accordion |
|`.Vlt-accordion--chevron-left`| Moves chevron to left of accordion |
|`.Vlt-accordion--plus-minus`| Changes chevron to plus/minus icon |
|`.Vlt-accordion--icons`| Increases content padding-left when using svgs in trigger |
|`.Vlt-accordion--large`| Increases trigger padding |
|`.Vlt-accordion__trigger`| Opens the directly following content |
|`.Vlt-accordion__content`| Main content of the accordion section |
|`.Vlt-accordion__content--noborder`| Removes the bottom border from the accordion |
|`.Vlt-js-accordion__trigger`| Opens the JavaScript only content, which can be anywhere on the page |
|`.Vlt-js-accordion__content`| Main content of the JavaScript accordion, requires data-trigger |
</div>