| title | React Accordion - Flowbite |
|---|---|
| description | Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from React and Tailwind CSS |
The accordion component from Flowbite React can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.
The reactivity and state is handled by React and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.
To use the accordion component, you need to import the <Accordion> component from flowbite-react:
import { Accordion } from "flowbite-react";Use this example of the <Accordion> component and the <AccordionPanel> and <AccordionTitle> subcomponents to create an accordion with multiple panels.
Use this example to automatically collapse all of the accordion panels by passing the collapseAll prop to the <Accordion> component.
Enable smooth open/close animation by passing animate and animationDuration (in milliseconds) to the <Accordion> component.
To learn more about how to customize the appearance of components, please see the Theme docs.