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.

ClassDescription
.uk-accordion-titleDefines and styles the toggle for each accordion item. Use <a> elements.
.uk-accordion-iconDefines and styles the icon part for each accordion item.
.uk-accordion-contentDefines the content part for each accordion item.
<ul uk-accordion>
  <li>
    <a class="uk-accordion-title" href>
      <span>Title</span>
      <span
        class="uk-accordion-icon"
        uk-icon="icon: chevron-down; ratio: 0.8"
      ></span>
    </a>
    <div class="uk-accordion-content"></div>
  </li>
</ul>
Copy to clipboard
    • 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 class="uk-accordion" uk-accordion>
      <li class="uk-open">
        <a class="uk-accordion-title" href>
          Item 1
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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>
Copy to clipboard
    • 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 class="uk-accordion" uk-accordion="collapsible: false">
      <li>
        <a class="uk-accordion-title" href>
          Item 1
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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>
Copy to clipboard
    • 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 class="uk-accordion" uk-accordion="multiple: true">
      <li class="uk-open">
        <a class="uk-accordion-title" href>
          Item 1
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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>
Copy to clipboard
    • 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 class="uk-accordion" uk-accordion>
      <li>
        <a class="uk-accordion-title" href>
          Item 1
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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
          <span
            class="uk-accordion-icon"
            uk-icon="icon: chevron-down; ratio: 0.8"
          ></span>
        </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

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.

Accessibility

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

  • The titles have an ID, the button role, the aria-expanded state and the aria-controls property set to the ID of the respective content.
  • The contents have an ID, the region role and the aria-labelledby property set to the ID of the respective title.

Keyboard interaction

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

  • The tab or shift+tab keys navigate through accordion titles.
  • The enter or space key toggles the content of the focused title.

Theme development

On your tailwind.config.js file, add the Accordion component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        accordion: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-accordion.uk-accordion
hook-item.uk-accordion > :nth-child(n + 2)
hook-title.uk-accordion-title
hook-title-focus.uk-accordion-title:focus
hook-title-active.uk-open > .uk-accordion-title
hook-title-hover.uk-accordion-title:hover
hook-content.uk-accordion-content
hook-misc*