- Components
- accordion
Accordion
Vertically collapsing panels for managing dense content.
Demo
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Installation
Add the component
-
Add the component
Shellflexi-cli add accordion -
Add the
This component require JS. By default we're using our own Interactive Component Library Flexilla .- With Alpine
- Without Alpine
If you've installed the plugin during component addition then you don't need to install it here.
Shellnpm i @flexilla/alpine-accordionAdd plugin in
app.jsflexilla.jsimport AlpineAccordion from "@flexilla/alpine-accordion" Alpine.plugin(AlpineAccordion)By default when adding the component with the CLI it will ask if you want to install dependdencies, and here it comes with the Alpine Plugin, if you've accepted installing it you need to uninstall the plugin and then Install the Vanilla Version
Shellnpm i @flexilla/accordionInitialize accordion in
app.jsflexilla.jsimport { Accordion } from "@flexilla/accordion" // init accordion for all Element with data-app-accordion attribute Accordion.autoInit('[data-app-accordion]')
Open multiple
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Variants
Solid
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Soft
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Outline
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Subtle
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
Link
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It's unstyled by default, giving you freedom over the look and feel.
Yes! You can use the transition prop to configure the animation.
References
Composition
| Prop | Description |
|---|---|
x-ui.accordion
|
The accordion container component |
x-ui.accordion.item
|
The accordion item component |
x-ui.accordion.trigger
|
The accordion trigger component of each item, each item must have one trigger
|
x-ui.accordion.content
|
The accordion content component of each item, each item must have one content
and it will be hidden by default and shown when the trigger is clicked
|
x-ui.accordion.indicator
|
The accordion item indicator component, the default is a arrow icon that will be rotated when the
item is open. Must be inside the trigger.
|
Props
To configure the accordion component you can use the following props. All props are optional.
| Prop | Description |
|---|---|
defaultValue
|
The default value of the accordion, it will be the value of the item that will be open by default.
|
type
|
The type of the accordion, it can be "single" or "multiple".
|
keepOneOpen
(boolean)
|
If true, the accordion will keep one item open at a time. All items can't be closed at the same
time.
|
multiple
(boolean)
|
The equivalent of type="multiple"
|
Item Props
| Prop | Description |
|---|---|
id
(string)
|
The id of the accordion item. It's required and must be unique.
|