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
Demo Coming Soon
Accordion examples will be available soon.
# 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