Accordion
Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.
Use the heading attribute on Accordion Item to set the heading text.
To ensure accessible heading levels use the heading-level attribute.
Use the expand-mode attribute on Accordion to determine if multiple items can opened at once or single (default).
In single mode only one Accordion Item can be expanded at a time. By default, the first Accordion Item will be expanded when the component is initialized.
In multi mode multiple Accordion Items can be expanded.
Use the expanded attribute on Accordion Item to set it's open state.
Use the appearance attribute to change the Accordion Item appearance.
- Type:
'ghost'|'ghost-light'|'filled' - Default:
'ghost'
The icon attribute displays an icon from the icon library, which prefixes the Accordion Item's heading.
The preferred way to add icons is to use the icon slot.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
Use the icon-trailing attribute to postfix the icon in place of the Accordion Item's chevron.
Use the meta attribute to add meta data to the Accordion Item's heading.
Use the size attribute to control the size of the Accordion Item.
Use the no-indicator attribute on Accordion Item to remove indicator icon from the heading element.