We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Accordion
component within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
accordion: {
hooks: {}
}
}
}),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="uk-accordion-icon"
uk-icon="icon: chevron-down; ratio: 0.8"
></span>
</a>
<div class="uk-accordion-content"></div>
</li>
</ul>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 reprehenderit.
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>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>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 reprehenderit.
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>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>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 reprehenderit.
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>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>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 reprehenderit.
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>Learn more about using hooks.
| Hook Name | Affected 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 | * |
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. |
Learn more about JavaScript components.
UIkit.accordion(element, options);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. |
The following methods are available for the component:
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. |
The Accordion component adheres to the Accordion WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
button role, the aria-expanded state and the aria-controls property set to the ID of the respective content.region role and the aria-labelledby property set to the ID of the respective title.The Accordion component can be accessed through keyboard using the following keys.