Accordion
A vertical item with hidden content.
Demos
Configurable
Name | Value |
---|---|
Props | |
actionIcon | |
actionAlwaysVisible | |
Slots | |
default | |
description | |
title | |
View | |
Reading direction | |
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information. |
Default
Name | Value |
---|---|
View | |
Reading direction |
With description
Name | Value |
---|---|
View | |
Reading direction |
Stacked
It's possible to stack accordions by adding them next to each other in the markup.
Name | Value |
---|---|
View | |
Reading direction |
With action button
To add an action button to the accordion, pass the actionButton
prop. The button is placed in the top right corner of the accordion, and it emits an event actionButtonClicked
when clicked.
TIP
If you are displaying an action button, make sure to provide a label for this button for accessibility purposes by using the actionButtonLabel
prop.
Name | Value |
---|---|
View | |
Reading direction |
With always visible action
To show the icon even when the accordion is collapsed, set the actionAlwaysVisible
prop.
Name | Value |
---|---|
View | |
Reading direction |
With different content
The accordion can be used with different elements, including images or tables.
Name | Value |
---|---|
View | |
Reading direction |
With different heading levels
The accordion heading can be changed to any heading level by passing the headingLevel
prop.
Name | Value |
---|---|
View | |
Reading direction |
Usage
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
actionAlwaysVisible | Forces the accordion to show the action icon. | boolean | 'true' , 'false' | false |
actionIcon | The icon that will be displayed on the right side of the accordion header when expanded. | Icon | - | null |
actionButtonLabel | Label for the action button. If an action icon is being used, then a label for that icon should be provided for ARIA support. | string | - | '' |
headingLevel | The heading level of the accordion title. | HeadingLevel | 'h1' , 'h2' , 'h3' , 'h4' , 'h5' , 'h6' | 'h3' |
Events
Event name | Properties | Description |
---|---|---|
action-button-click | When the action button is clicked. |
Slots
Name | Description | Bindings |
---|---|---|
title | Customizable Accordion title | |
description | Customizable Accordion description | |
default | Customizable Accordion content |