# Accordion This component allows you to create a list of items that can be displayed individually. ## Usage Create an ```ul``` list and add the ```.accordion``` class. To apply the default style, add the ```.accordion-default``` class. Each item in the list must contain two additional items: | Class | Description | | ------ | ------- | | ```.accordion-title``` | Contains the title of an element of the accordion | | ```.accordion-content``` | Contains the content of an accordion element |
```html ``` ----------- ## Expendable By default, only one item in the list can be displayed at a time. To allow multiple accordion elements to be displayed, add the ```.accordion-expendable``` class to the ```.accordion``` element.
```html ``` ----------- ## Collapsible off To allow the accordion to close all items in the list, add the ```.accordion-collapsible-off``` class to the ```.accordion``` item.
```html ``` ----------- ## Set open To display a default item when initializing the accordion, add the ```li``` class to an ```.active``` item in the list. ```html ``` !!! note If the item does not have the ```.accordion-expendable``` class or ```{expendable: true}``` option and several ```.active``` items are found, only the first one will be displayed. ----------- ## JavaScript ### Initialization ```javascript $.vibrance.accordion( element, options ); ``` ### Options | Name | Type | Default | Description | | ------ | ------- | ------- | ------- | | ```animation``` | Booleen | ```true``` | Reveal item directly or with a transition animation. | | ```duration``` | Number | ```300``` | Animation duration in milliseconds. | | ```expendable``` | Booleen | ```false``` | Allow multiple opening of the accordion items. | | ```collapsible``` | Booleen | ```true``` | Allow all items of the accordion to be closed. | ### Methods ```javascript /* Open accordion item */ $.vibrance.accordion( element ).open( index ); /* Close accordion item */ $.vibrance.accordion( element ).close( index ); /* * Show accordion item if hidden * Hide accordion item if shown */ $.vibrance.accordion( element ).toggle( index ); ``` | Name | Type | Default | Description | | ------ | ------- | ------- | ------- | | ```index``` | String, Integer, Node | ```0``` | The accordion item target index (0 based). | ### Events | Event Type | Description | | ------ | ------- | | ```vibrance.accordion.open``` | This event is fired when an accordion element is displayed. | | ```vibrance.accordion.close``` | This event is fired when an accordion element is hidden. | | ```vibrance.accordion.toggle``` | This event is fired by clicking on an element of the accordion. | ```javascript $( element ).on('vibrance.accordion.open', function(e){ // do something }); ``` -----------