# Accordion

Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

## Usage

To apply the Accordion component, add the `uk-accordion` class and the `data-uk-accordion` attribute to a container element. Add the `uk-accordion-content` class to each of the content sections within the container. Finally, add the `uk-accordion-title` class to any element, like a heading, above the content section to create a toggle.

### Example

### Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Markup

    <div class="uk-accordion" data-uk-accordion>

        <h3 class="uk-accordion-title">...</h3>
        <div class="uk-accordion-content">...</div>

        <h3 class="uk-accordion-title">...</h3>
        <div class="uk-accordion-content">...</div>

        <h3 class="uk-accordion-title">...</h3>
        <div class="uk-accordion-content">...</div>

    </div>

## Muliple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the `{collapse: false}` option to the data attribute.

### Example

### Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

### Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

## JavaScript options

Option | Possible value | Default | Description
--- | --- | --- | ---
`showfirst` | boolean | true | Show first item on init
`collapse` | boolean | true | Allow multiple open items
`animate` | boolean | true | Animate toggle
`easing` | string | swing | Animation function
`duration` | integer | 300 | Animation duration
`toggle` | string | .uk-accordion-title | Css selector for toggles
`containers` | string | .uk-accordion-content | Css selector for content containers
`clsactive` | string | uk-active | Class to add when an item is active

### Init element manually

    var accordion = UIkit.accordion(element, { /* options */ });

### Events

Name | Parameter | Description
--- | --- | ---
`toggle.uk.accordion` | event, active, toggle, content | On item toggle