A versatile UI component for creating collapsible content sections.
Welcome to the Accordion component! This section is open by default.
The Accordion is great for organizing content in a compact way.
This item has a custom button background and animation duration.
You can easily adjust colors, timing, and other properties.
The AccordionContainer wraps all AccordionItem components and manages their behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
openSingle | Boolean | true | If true, only one accordion item can be open at a time. |
class | String | undefined | Additional CSS classes to apply to the container. |
The AccordionItem represents an individual section in the accordion.
The following table lists the available props for the Accordion component:
| Prop | Type | Default | Description |
|---|---|---|---|
open | Boolean | false | If true, the accordion item is open by default. |
maxHeight | Number | 300 | The maximum height of the content area when open. |
duration | Number | 0.3 | The duration of the open/close animation in seconds. |
name | String | required | A unique identifier for the accordion item. |
buttonClass | String | undefined | Additional CSS classes to apply to the accordion button. |
You can use slots to customize the buttons and items content of the Accordion.
| Slot | Description |
|---|---|
trigger | Content for the accordion item's header/trigger. |
default | Content for the expandable section of the accordion item. |
index props for each AccordionItem.trigger slot.maxHeight prop to manage long content.duration prop for optimal animation speed.openSingle on AccordionContainer to control simultaneous open sections.The Accordion components support keyboard navigation and manage ARIA attributes automatically.
You can customize the Accordion's appearance by:
buttonBackground propFor more examples and advanced usage, refer to the live demo at the top of this page.