Accordion
An Accordion component is a UI element that allows users to expand and collapse sections of content. It is commonly used to organize information in a compact and accessible manner, displaying only the headers by default and revealing the associated content when clicked. This helps improve the readability of complex or lengthy information by reducing clutter on the page.
# Demo
Single Mode
Only one accordion item can be open at a time.
Multiple Mode
Multiple accordion items can be open simultaneously.
Custom Styling
Customize appearance with className props for different parts.
With Custom IDs
Items with custom IDs for better control and accessibility.
Minimal Example
Simplest accordion with just the required props.
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| className | string | ' ' | You can customise by passing tailwind classes. |
| itemClassName | string | ' ' | You can customise by passing tailwind classes. |
| triggerClassName | string | ' ' | You can customise by passing tailwind classes. |
| contentClassName | string | ' ' | You can customise by passing tailwind classes. |
| type | AccordionTypes | AccordionTypes.SINGLE | You can pass type of the accordion. |
| items | AccordionListItem[] | Required | You can pass list of accordion items. |
| keyExtractor | (item: T, index: number) => string | number | Optional | Custom key extractor function for items. |
| renderTrigger | (item: T, index: number) => React.ReactNode | Optional | Custom render function for accordion triggers. |
| renderContent | (item: T, index: number) => React.ReactNode | Optional | Custom render function for accordion content. |
# Tags