Use our React 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 examples that you can use in your projects. All our examples are based on React and styled with Tailwind CSS. We also included some Accordion props that are available.
Here are some examples of how you can implement different types of accordions.
This pre-styled component example can be used by developers looking for a simple and functional accordion to present information efficiently.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export function DefaultAccordion() {
const [open, setOpen] = React.useState(1);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={open === 1}>
<AccordionHeader onClick={() => handleOpen(1)}>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}>
<AccordionHeader onClick={() => handleOpen(2)}>
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}>
<AccordionHeader onClick={() => handleOpen(3)}>
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>
</>
);
}You can configure a section of an Accordion to remain open at all times and not be affected by the opening or closing of adjacent sections by using a separate state variable (alwaysOpen). See the coded example below.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export function AccordionAlwaysOpen() {
const [open, setOpen] = React.useState(0);
const [alwaysOpen, setAlwaysOpen] = React.useState(true);
const handleAlwaysOpen = () => setAlwaysOpen((cur) => !cur);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={alwaysOpen}>
<AccordionHeader onClick={handleAlwaysOpen}>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 === 1}>
<AccordionHeader onClick={() => handleOpen(1)}>
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 === 2}>
<AccordionHeader onClick={() => handleOpen(2)}>
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>
</>
);
}Use this example if you want the accordion sections to be all initially set to be open by default. This is achieved by setting the state variables (openAcc1, openAcc2, openAcc3) to true during their initialization with the useState hook.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export default function Example() {
const [openAcc1, setOpenAcc1] = React.useState(true);
const [openAcc2, setOpenAcc2] = React.useState(true);
const [openAcc3, setOpenAcc3] = React.useState(true);
const handleOpenAcc1 = () => setOpenAcc1((cur) => !cur);
const handleOpenAcc2 = () => setOpenAcc2((cur) => !cur);
const handleOpenAcc3 = () => setOpenAcc3((cur) => !cur);
return (
<>
<Accordion open={openAcc1}>
<AccordionHeader onClick={handleOpenAcc1}>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={openAcc2}>
<AccordionHeader onClick={handleOpenAcc2}>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={openAcc3}>
<AccordionHeader onClick={handleOpenAcc3}>
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>
</>
);
}This example showcases how you can modify the open/close state icon for your react accordion component using the icon prop.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
function Icon({ id, open }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className={`${id === open ? "rotate-180" : ""} h-5 w-5 transition-transform`}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
);
}
export function AccordionCustomIcon() {
const [open, setOpen] = React.useState(0);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={open === 1} icon={<Icon id={1} open={open} />}>
<AccordionHeader onClick={() => handleOpen(1)}>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} icon={<Icon id={2} open={open} />}>
<AccordionHeader onClick={() => handleOpen(2)}>
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} icon={<Icon id={3} open={open} />}>
<AccordionHeader onClick={() => handleOpen(3)}>
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>
</>
);
}You can modify the open/close state animation for the Accordion component using the animate prop. CUSTOM_ANIMATION is an object that defines the behavior of the accordion's mount and unmount animations. On mount (when the accordion section is opened), the scale is set to 1 (normal size). On unmount (when the accordion section is closed), the scale is reduced to 0.9, giving a slight shrinking effect.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
const CUSTOM_ANIMATION = {
mount: { scale: 1 },
unmount: { scale: 0.9 },
};
export function AccordionCustomAnimation() {
const [open, setOpen] = React.useState(0);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={open === 1} animate={CUSTOM_ANIMATION}>
<AccordionHeader onClick={() => handleOpen(1)}>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} animate={CUSTOM_ANIMATION}>
<AccordionHeader onClick={() => handleOpen(2)}>
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} animate={CUSTOM_ANIMATION}>
<AccordionHeader onClick={() => handleOpen(3)}>
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>
</>
);
}You can use Tailwind CSS classes to add custom styles to the Accordion component.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export function AccordionCustomStyles() {
const [open, setOpen] = React.useState(1);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={open === 1} className="mb-2 rounded-lg border border-blue-gray-100 px-4">
<AccordionHeader
onClick={() => handleOpen(1)}
className={`border-b-0 transition-colors ${
open === 1 ? "text-blue-500 hover:!text-blue-700" : ""
}`}
>
What is Material Tailwind?
</AccordionHeader>
<AccordionBody className="pt-0 text-base font-normal">
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} className="mb-2 rounded-lg border border-blue-gray-100 px-4">
<AccordionHeader
onClick={() => handleOpen(2)}
className={`border-b-0 transition-colors ${
open === 2 ? "text-blue-500 hover:!text-blue-700" : ""
}`}
>
How to use Material Tailwind?
</AccordionHeader>
<AccordionBody className="pt-0 text-base font-normal">
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} className="rounded-lg border border-blue-gray-100 px-4">
<AccordionHeader
onClick={() => handleOpen(3)}
className={`border-b-0 transition-colors ${
open === 3 ? "text-blue-500 hover:!text-blue-700" : ""
}`}
>
What can I do with Material Tailwind?
</AccordionHeader>
<AccordionBody className="pt-0 text-base font-normal">
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>
</>
);
}The classes used in this example include:
· mb-2: adds a margin-bottom of 2 units for spacing between accordion items.
· rounded-lg: applies large rounded corners to the accordion.
· border border-blue-gray-100: adds a light grayish-blue border.
· px-4: adds padding along the x-axis (left and right sides) within the accordion.
An Accordion can be disabled as well, it will help you to prevent user interactions, like click over the Accordion component.
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export function AccordionDisabled() {
const [open, setOpen] = React.useState(0);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
return (
<>
<Accordion open={open === 1} disabled>
<AccordionHeader onClick={() => handleOpen(1)}>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}>
<AccordionHeader onClick={() => handleOpen(2)}>
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}>
<AccordionHeader onClick={() => handleOpen(3)}>
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>
</>
);
}In the example above, the first accordion (open === 1) is set to be disabled by passing the disabled prop. This means that this section will not be interactive and cannot be opened or closed by the user.
An Accordion can be nested as well
import React from "react";
import {
Accordion,
AccordionHeader,
AccordionBody,
} from "@material-tailwind/react";
export function AccordionNesting() {
const [open, setOpen] = React.useState(1);
const [openNest, setOpenNest] = React.useState(0);
const handleOpen = (value) => setOpen(open === value ? 0 : value);
const handleOpenNest = (value) => setOpenNest(openNest === value ? 0 : value);
return (
<>
<Accordion open={open === 1}>
<AccordionHeader onClick={() => handleOpen(1)}>
What is Material Tailwind?
</AccordionHeader>
<AccordionBody className="p-3">
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.
{/* Nested Accordions */}
<Accordion open={openNest === 1}>
<AccordionHeader onClick={() => handleOpenNest(1)}>
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={openNest === 2}>
<AccordionHeader onClick={() => handleOpenNest(2)}>
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>
</AccordionBody>
</Accordion>
<Accordion open={open === 2}>
<AccordionHeader onClick={() => handleOpen(2)}>
How to use Material Tailwind?
</AccordionHeader>
<AccordionBody className="p-3">
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.
{/* Nested Accordions */}
<Accordion open={openNest === 3}>
<AccordionHeader onClick={() => handleOpenNest(3)}>
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={openNest === 4}>
<AccordionHeader onClick={() => handleOpenNest(4)}>
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>
</AccordionBody>
</Accordion>
<Accordion open={open === 3}>
<AccordionHeader onClick={() => handleOpen(3)}>
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.
{/* Nested Accordion */}
<Accordion open={openNest === 5}>
<AccordionHeader onClick={() => handleOpenNest(5)}>
What is Material Tailwind?
</AccordionHeader>
<AccordionBody className="p-3">
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>
</AccordionBody>
</Accordion>
</>
);
}The component supports various props that allow you to customize its behavior and style. These are the custom props that we've added and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
open | boolean | Open accordion collapse | No default value it's a required prop. |
icon | node | Change accordion collapse end icon | undefined |
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 it's a required prop. |
import type { AccordionProps } from "@material-tailwind/react";The following props are available for accordion header component. These are the custom props that 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 it's a required prop. |
import type { AccordionHeaderProps } from "@material-tailwind/react";The following props are available for the accordion body component. These are the custom props that 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 it's a required prop. |
import type { AccordionBodyProps } from "@material-tailwind/react";Use these to animate your react accordion.
type animate = {
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for accordion components, the theme object for accordion components has two main objects:
A. The defaultProps object for setting up the default value for props of accordion components.
B. The styles object for customizing the theme and styles of accordion components.
You can customize the theme and styles of accordion components by adding Tailwind CSS classes as key paired values for objects.
This object allows developers to precisely control various aspects of the accordion design, including colors, fonts, and margins. The theme object is particularly useful when creating a cohesive accordion menu or accordion card that aligns with your application's overall style guide.
interface AccordionStylesType {
defaultProps: {
icon: node;
className: string;
animate: {
mount: object;
unmount: object;
};
disabled: boolean;
};
styles: {
base: {
container: object;
header: {
initial: object;
active: object;
icon: object;
};
body: object;
disabled: object;
};
};
}import type { AccordionStylesType } from "@material-tailwind/react";Whether you're looking to modify the color palette, adjust the border styles, or apply custom animations, the theme customization options are both robust and intuitive.
The accordion design can be further enhanced using Material Tailwind's utility classes for a more refined look.
const theme = {
accordion: {
defaultProps: {
icon: undefined,
className: "",
animate: {
unmount: {},
mount: {},
},
disabled: false,
},
styles: {
base: {
container: {
display: "block",
position: "relative",
width: "w-full",
},
header: {
initial: {
display: "flex",
justifyContent: "justify-between",
alignItems: "items-center",
width: "w-full",
py: "py-4",
borderWidth: "border-b border-b-blue-gray-100",
color: "text-blue-gray-700",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-xl",
textAlign: "text-left",
fontWeight: "font-semibold",
lineHeight: "leading-snug",
userSelect: "select-none",
hover: "hover:text-blue-gray-900",
transition: "transition-colors",
},
active: { color: "text-blue-gray-900" },
icon: {
ml: "ml-4",
},
},
body: {
display: "block",
width: "w-full",
py: "py-4",
color: "text-gray-700",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-sm",
fontWeight: "font-light",
lineHeight: "leading-normal",
},
disabled: {
pointerEvents: "pointer-events-none",
opacity: "opacity-50",
},
},
},
},
};