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

Heading 3

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

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