Skip to content
On this page

Accordion

A vertical item with hidden content.

Demos

Configurable

NameValue
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

NameValue
View
Reading direction

With description

NameValue
View
Reading direction

Stacked

It's possible to stack accordions by adding them next to each other in the markup.

NameValue
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.


NameValue
View
Reading direction

With always visible action

To show the icon even when the accordion is collapsed, set the actionAlwaysVisible prop.


NameValue
View
Reading direction

With different content

The accordion can be used with different elements, including images or tables.

NameValue
View
Reading direction

With different heading levels

The accordion heading can be changed to any heading level by passing the headingLevel prop.

NameValue
View
Reading direction

Usage

Props

Prop nameDescriptionTypeValuesDefault
actionAlwaysVisibleForces the accordion to show the action icon.boolean'true', 'false'false
actionIconThe icon that will be displayed on the right side of the accordion header when expanded.Icon-null
actionButtonLabelLabel for the action button. If an action icon is being used, then a label for that icon should be provided for ARIA support.string-''
headingLevelThe heading level of the accordion title.HeadingLevel'h1', 'h2', 'h3', 'h4', 'h5', 'h6''h3'

Events

Event namePropertiesDescription
action-button-clickWhen the action button is clicked.

Slots

NameDescriptionBindings
titleCustomizable Accordion title
descriptionCustomizable Accordion description
defaultCustomizable Accordion content