Use our Tailwind CSS accordion component to allow the user to show and hide sections of related content on a page. There are many ways to use this component, like displaying a list of FAQs, showing various menus and submenus, displaying the locations of a particular company, and so on.
See below our simple and versatile accordion example that you can use in your React and Tailwind CSS projects. We also included some accordion props that are available.
import { useState } from "react";
import {
Accordion,
AccordionHeader,
AccordionBody
} from "@material-tailwind/react";
export default function Example() {
const [open, setOpen] = useState(0);
const handleOpen = (value) => {
setOpen(open === value ? 0 : value);
};
return (
<Fragment>
<Accordion open={open === 1} onClick={() => handleOpen(1)}>
<AccordionHeader>What is Material Tailwind?</AccordionHeader>
<AccordionBody>
We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes.
We're constantly trying to express ourselves and actualize our
dreams.
</AccordionBody>
</Accordion>
<Accordion open={open === 2} onClick={() => handleOpen(2)}>
<AccordionHeader>How to use Material Tailwind?</AccordionHeader>
<AccordionBody>
We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes.
We're constantly trying to express ourselves and actualize our
dreams.
</AccordionBody>
</Accordion>
<Accordion open={open === 3} onClick={() => handleOpen(3)}>
<AccordionHeader>What can I do with Material Tailwind?</AccordionHeader>
<AccordionBody>
We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes.
We're constantly trying to express ourselves and actualize our
dreams.
</AccordionBody>
</Accordion>
</Fragment>
);
}
The following props are available for the accordion component. These are the custom props that come with we've added for the accordion component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
open | boolean | Open accordion collapse | No default value its a required prop. |
icon | node | Change accordion collapse end icon | false |
animate | Animate | Change accordion body animation | undefined |
disabled | boolean | Disable the accordion | false |
className | string | Add custom className for accordion | '' |
children | node | Add content for accordion | No default value its a required prop. |
The following props are available for the accordion header component. These are the custom props that come with we've added for the accordion header component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | string | Add custom className for accordion header | '' |
children | node | Add content for accordion header | No default value its a required prop. |
The following props are available for the accordion body component. These are the custom props that come with we've added for the accordion body component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
className | string | Add custom className for accordion body | '' |
children | node | Add content for accordion body | No default value its a required prop. |
type animate = {
mount?: Object;
unmount?: Object;
};