Accordion
Synonyms: Collapse, Drop-down menu
Description: The Accordion component organizes content into expandable and collapsible sections. It supports a compact layout, improves overview for longer content, and allows users to show details on demand.
Example
Display of the component without optional fields set. Code can be shown.
<KolAccordion _label="Accordion Element" _open={true} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Accessibility
- The open/close icon is aligned to the left to support usability for users with limited field of vision.
- The characters
+and-are used for the "open" and "closed" states. - The use of characters such as
<or>as status indicators is deliberately avoided. - The default view is designed for the highest possible contrast.
Links and References
Usage
Keyboard Controls
| Key | Function |
|---|---|
Tab | Moves focus to the individual Accordion tabs. |
Enter | Opens or closes the focused Accordion tab. |
Best Practices / Recommendations
- Use an accordion for supplementary or secondary information that does not need to be permanently visible.
- Structure longer content into clearly named sections and use concise headings via
_label. - Do not place important primary content (e.g. key calls to action or legally relevant notices) exclusively in collapsed areas.
- Do not place error messages only inside closed accordion areas.
- Do not use an accordion as a primary selection or filter element.
Use Cases
- FAQ sections with many questions and answers
- Detail views of properties or variants of an element
- Grouping of extensive form sections
- Structuring content on small screens with limited space
- Organizing longer documentation or settings pages
FAQ
When should an accordion be open by default?
If content is likely to be needed immediately, a section can be initially opened using _open.
Can I display arbitrary content in the accordion?
Yes, the content area is provided via the slot.
What heading levels are available?
Levels 1 to 6 are available via _level. According to the API, 0 is also possible.
Construction / Technical Details
Playground
<KolAccordion _label="Accordion Element" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Functionality (with Code)
Basic Content and Label
The visible heading is set via _label. The content area is filled via the slot.
<KolAccordion _label="Accordion Element" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Heading Structure
The heading level is controlled via _level.
<KolAccordion _label="Accordion Element" _level={2} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>State Control
Initial opening is done via _open. For the non-interactive state, _disabled is available.
<KolAccordion _label="Accordion Element" _open={true} >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</KolAccordion>Event Binding
For event handling and callbacks, see
Example for the click event:
| Event | Trigger | Value |
|---|---|---|
click | Element is clicked | - |
API
Overview
The Accordion component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.
Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_level | _level | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 0 |
_on | -- | Gibt die EventCallback-Funktionen an. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, boolean> | undefined; } | undefined |
_open | _open | Opens/expands the element when truthy, closes/collapses when falsy. | boolean | undefined | false |
Methods
click
click() => Promise<void>
Triggers a click on the trigger button of the first section.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Allows arbitrary HTML to be inserted into the content area of the accordion. |