Generate and export Tailwind color patterns.
Detailed documentation for the Accordion and AccordionItem components in the PixelBlockUI library.
The Accordion component provides a flexible and interactive way to display collapsible content sections. It consists of the Accordion container and AccordionItem elements.
You can install the Accordion component using the PixelBlock CLI tool.
npx pixelblock-cli add Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
You can also create an interactive accordion with dynamic content and state management.
Dynamic content for item 1
Dynamic content for item 2
Dynamic content for item 3
When singleOpen is enabled, only one item can be open at a time. Opening a new item will automatically close the previously open item.
This item is in single-open mode. When you open this item, the other items will close.
You can only open one item at a time in this mode.
The other items will be closed automatically when a new one is opened.
When singleOpen is set to false (or not provided), multiple items can be opened at the same time. Each item can be toggled independently.
This item is in multi-open mode. You can open multiple items at once.
Each item can be opened independently without closing others.
All items can be expanded simultaneously.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Nested AccordionItem components. | |
singleOpen | boolean | true | Determines if only one item can be open at a time. |
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | The title of the accordion item. | |
children | ReactNode | The content to be displayed within the item. | |
isOpen | boolean | false | Controls the open/close state programmatically. |
onToggle | function | Callback for toggling the open/close state. | |
openIcon | ReactNode | Custom icon to display when the item is closed. | |
closeIcon | ReactNode | Custom icon to display when the item is open. |
The Accordion and AccordionItem components offer a simple and effective way to display collapsible sections of content. By utilizing Tailwind CSS, these components are easy to style and integrate into your React or Next.js projects.
For more information and detailed usage instructions, refer to the PixelBlockUI Documentation.