- 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
Install the component
-
Install the component
Shellphp artisan flexi:add accordion -
Install dependencies
This component requires JS. By default we're using our own Interactive Component Library Flexilla .Shellnpm i @flexilla/accordion -
Usage
- With Alpine/Livewire
- Without Alpine
Add plugin in
app.jsflexilla.jsimport { AccordionPlugin } from "./plugins/accordion"; Alpine.plugin(AccordionPlugin);Initialize 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.
|