UIkit Accordion– Accordion is basically list of items which is displayed when we click on the header. Add attribute uk-accordion to ul to create Accordion container and then add accordion title and content. Here in this article we are going to explain how to create Accordion in UIkit framework.
UIkit Accordion | Component | Collapse | Open Example
Add attribute uk-accordion to parent container and add title and content for each item. Here is simple example of Accordion-
UIkit Accordion Example:
|
- .uk-accordion-title– This is used to add the title of Accordion item.
- .uk-accordion-content– This is used to add the content of Accordion item.
If you run the above example it will produce output something like this-
No Collapse
By default Accordion items are collapsible. If you want to prevent the item collapse you can assign uk-accordion value – collapsible: false.
- ...
Here is complete example-
No Collapse Example:
|
Open Multiple Items
You can open multiple items at a time by assigning uk-accordion attribute value multiple: true.
Allow Multiple Item Open Example:
|
Set Open Items
We can use class=”open” to keep the specified item open. You can also keep multiple options open at same time. Just make sure to add multiple: true to accordion.
Set Open Items Example:
|
Options
| Option | Value | Default | Description |
|---|---|---|---|
targets |
String | > * |
CSS selector of the element(s) to toggle. |
active |
Number | false |
Index of the element to open initially. |
collapsible |
Boolean | true |
This Allows all items to close if they are open. |
multiple |
Boolean | false |
Use this to open multiple items at same time. |
animation |
Boolean | true |
Use this to add animation. |
transition |
String | ease |
The transition to use when revealing items. |
duration |
Number | 200 |
Animation duration in milliseconds. |
JavaScript
You can use the following JavaScript component.
Initialize
UIkit.accordion(element, options);
Events
| Name | Description |
|---|---|
beforeshow |
Fires before an item is displayed. Return false to prevent showing. |
show |
It is Fired after an item is shown. |
shown |
Fires after the item is shown fully. |
beforehide |
Fires before an item is hidden. Return false to prevent hiding. |
hide |
Fires after an item’s hide animation has started. |
hidden |
Fires after an item is hidden completly. |
Toggle
UIkit.accordion(element).toggle(index, animate);
| Name | Type | Default | Description |
|---|---|---|---|
index |
String, Integer, Node | 0 | Accordion pane to toggle. 0 based index. |
animate |
Boolean | true | Suppress opening animation by passing false. |