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
Heading 2
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 date 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
Heading 3
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 |
