Accordion

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-icon`	Defines and styles the icon part for each accordion item.
`.uk-accordion-content`	Defines the content part for each accordion item.

<ul uk-accordion>
  <li>
    <a class="uk-accordion-title" href>
      <span>Title</span>
      <span
        class="size-4 uk-accordion-icon"
      >
        <uk-icon icon="chevron-down"></uk-icon>
      </span>
    </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 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"></uk-icon>
      </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"></uk-icon>
      </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"></uk-icon>
      </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>

- 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"></uk-icon>
      </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"></uk-icon>
      </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"></uk-icon>
      </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>

- 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"></uk-icon>
      </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"></uk-icon>
      </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"></uk-icon>
      </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>

- 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"></uk-icon>
      </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"></uk-icon>
      </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"></uk-icon>
      </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

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 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.

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.

On This Page
Usage
No collapsing
Multiple open items
Set open items
Component options
JavaScript
Accessibility

Request Web Components

Franken UI is an independent project. Help support it and expand its free component library.

Reach out