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.
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.
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.

AttributeTypeDescriptionDefault
openbooleanOpen accordion collapseNo default value its a required prop.
iconnodeChange accordion collapse end iconfalse
animateAnimateChange accordion body animationundefined
disabledbooleanDisable the accordionfalse
classNamestringAdd custom className for accordion''
childrennodeAdd content for accordionNo 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.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for accordion header''
childrennodeAdd content for accordion headerNo 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.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for accordion body''
childrennodeAdd content for accordion bodyNo default value its a required prop.

Types

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