Skip to main content

Documentation

Accordion

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.

Class Description
.uk-accordion-title Defines and styles the toggle for each accordion item. Use <a> elements.
.uk-accordion-content Defines 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>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul uk-accordion>
        <li class="uk-open">
            <a class="uk-accordion-title" href>Item 1</a>
            <div class="uk-accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 2</a>
            <div class="uk-accordion-content">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 3</a>
            <div class="uk-accordion-content">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
            </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>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul uk-accordion="collapsible: false">
        <li>
            <a class="uk-accordion-title" href>Item 1</a>
            <div class="uk-accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 2</a>
            <div class="uk-accordion-content">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 3</a>
            <div class="uk-accordion-content">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
            </div>
        </li>
    </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>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul uk-accordion="multiple: true">
        <li class="uk-open">
            <a class="uk-accordion-title" href>Item 1</a>
            <div class="uk-accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 2</a>
            <div class="uk-accordion-content">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 3</a>
            <div class="uk-accordion-content">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
            </div>
        </li>
    </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>
    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

  • <ul uk-accordion>
        <li>
            <a class="uk-accordion-title" href>Item 1</a>
            <div class="uk-accordion-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </li>
        <li class="uk-open">
            <a class="uk-accordion-title" href>Item 2</a>
            <div class="uk-accordion-content">
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
            </div>
        </li>
        <li>
            <a class="uk-accordion-title" href>Item 3</a>
            <div class="uk-accordion-content">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
            </div>
        </li>
    </ul>

Component options

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

Option Value Default Description
active Number false Index of the element to open initially.
animation Boolean true Reveal item directly or with a transition.
collapsible Boolean true Allow all items to be closed.
content String > .uk-accordion-content The content selector, which selects the accordion content elements.
duration Number 200 Animation duration in milliseconds.
multiple Boolean false Allow multiple open items.
targets String > * CSS selector of the element(s) to toggle.
toggle String > .uk-accordion-title The toggle selector, which toggles accordion items.
transition String ease The transition to use when revealing items. Use keyword for easing functions.
offset Number 0 Pixel 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:

Name Description
beforeshow Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show Fires after an item is shown.
shown Fires after the item's show animation has been completed.
beforehide Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide Fires after an item's hide animation has started.
hidden Fires 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.

Name Type Default Description
index String, Number, Node 0 Accordion pane to toggle. 0 based index.
animate Boolean true Suppress opening animation by passing false.

Accessibility

The Accordion component adheres to the Accordion WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

Keyboard interaction

The Accordion component can be accessed through the keyboard using the following keys.