Accordion

Create a list of items that can be shown individually by clicking an item's header.

Accordion

This is an alert

Create a list of items that can be shown individually by clicking an item's header.

Usage

The Accordion component consists of a parent container with the uk-accordion attribute, and a title and content part for each accordion item.

ClassDescription
.uk-accordion-titleDefines and styles the toggle for each accordion item. Use <a> elements.
.uk-accordion-contentDefines the content part for each accordion item.
<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href="#"></a>
        <div class="uk-accordion-content"></div>
    </li>
</ul>

No collapsing

By default, all accordion items can be collapsed. To prevent this behavior and always maintain one open item, add the collapsible: false option to the attribute.

<ul uk-accordion="collapsible: false"></ul>

Multiple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the multiple: true option to the uk-accordion attribute.

<ul uk-accordion="multiple: true"></ul>

Set open items

To specify which items should be opened initially, add the .uk-open class to the item. You can also use this to open multiple items. Just make sure to add the option multiple: true to the uk-accordion attribute.

Note Alternatively, you can open a single item by adding the active: <index> option to the uk-accordion attribute, e.g. active: 1 to show the second element (the index is zero-based). Note that this will overwrite the uk-open class.

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li>
    <li></li>
</ul>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
activeNumberfalseIndex of the element to open initially.
animationBooleantrueReveal item directly or with a transition.
collapsibleBooleantrueAllow all items to be closed.
contentString> .uk-accordion-contentThe content selector, which selects the accordion content elements.
durationNumber200Animation duration in milliseconds.
multipleBooleanfalseAllow multiple open items.
targetsString> *CSS selector of the element(s) to toggle.
toggleString> .uk-accordion-titleThe toggle selector, which toggles accordion items.
transitionStringeaseThe transition to use when revealing items. Use keyword for easing functions.
offsetNumber0Pixel offset added to scroll top.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.accordion(element, options);

Events

The following events will be triggered on elements with this component attached:

NameDescription
beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires after an item’s hide animation has started.
hiddenFires after an item is hidden.

Methods

The following methods are available for the component:

Toggle

UIkit.accordion(element).toggle(index, animate);

Toggles the content pane.

NameTypeDefaultDescription
indexString, Number, Node0Accordion pane to toggle. 0 based index.
animateBooleantrueSuppress opening animation by passing false.