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
Published
July 4, 2019

Leave a comment