Accordion
Demo
Single Item
Step-by-step guides to help you get started with Alocite Framework.
Multiple Items
Step-by-step guides to help you get started with Alocite Framework.
Detailed information about Alocite's API endpoints and usage.
Connect with other Alocite users, share ideas, and get help.
Latest news, features, and updates from the Alocite team.
Props
| Prop | Type | Description |
|---|---|---|
type | 'single' | 'multiple' (optional) | Determines if only one panel can be open at a time ('single') or multiple panels ('multiple'). |
children | { trigger: React.ReactNode, content: React.ReactNode }[] | An array of objects representing accordion items, each with a trigger and content. |
defaultIndex | number | number[] (optional) | The index (or indices for 'multiple' type) of the initially opened panel(s). |
defaultOpen | boolean (optional) | If true, all panels will be open by default. |
classNames | { root?: string; item?: string; trigger?: string; content?: string } (optional) | Custom class names for different parts of the Accordion. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Accordion component.item: CSS class for styling each Accordion item.trigger: CSS class for styling the trigger element of each item.content: CSS class for styling the content area of each item.
Functionality
- The Accordion allows for efficient organization and display of content.
- Supports both single-panel and multi-panel modes for varied use cases.
- Provides options for default states, allowing panels to be pre-opened on load.