Tailwind CSS Accordion - React

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.

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.

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&apos;re not always in the position that we want to be at.
          We&apos;re constantly growing. We&apos;re constantly making mistakes.
          We&apos;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&apos;re not always in the position that we want to be at.
          We&apos;re constantly growing. We&apos;re constantly making mistakes.
          We&apos;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&apos;re not always in the position that we want to be at.
          We&apos;re constantly growing. We&apos;re constantly making mistakes.
          We&apos;re constantly trying to express ourselves and actualize our
          dreams.
        </AccordionBody>
      </Accordion>
    </Fragment>
  );
}

Accordion Props

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.

Accordion Header Props

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.

Accordion Body Props

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.

Types

type animate = {
  mount?: Object;
  unmount?: Object;
};

getting started

alert