Skip to content

Latest commit

 

History

History
716 lines (614 loc) · 24.5 KB

accordion.mdx

File metadata and controls

716 lines (614 loc) · 24.5 KB
title description navigation github prev next
Tailwind CSS Accordion for React - Material Tailwind
Customise your web projects with our easy-to-use accordion component for Tailwind CSS and React using Material Design guidelines.
accordion
default-accordion
accordion-always-open
accordion-all-open
accordion-custom-icon
accordion-custom-animation
accordion-custom-styles
accordion-disabled
accordion-props
accordion-header-props
accordion-body-props
types-animate
accordion-theme
accordion-theme-object-type
accordion-theme-customization
accordion
screens
alert
# Tailwind CSS Accordion - React

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.


Accordion Examples

Here are some examples of how you can implement different types of accordions.

## Default Accordion

This pre-styled component example can be used by developers looking for a simple and functional accordion to present information efficiently.

<CodePreview link="accordion#accordion" component={<AccordionExamples.DefaultAccordion />}>

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&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}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          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}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          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>
    </>
  );
}

## Accordion Always Open

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.

<CodePreview component={<AccordionExamples.AccordionAlwaysOpen />}>

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&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 === 1}>
        <AccordionHeader onClick={() => handleOpen(1)}>
          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 === 2}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          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>
    </>
  );
}

## Accordion All Open

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.

<CodePreview component={<AccordionExamples.AccordionAllOpen />}>

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&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={openAcc2}>
        <AccordionHeader onClick={handleOpenAcc2}>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={openAcc3}>
        <AccordionHeader onClick={handleOpenAcc3}>
          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>
    </>
  );
}

## Accordion Custom Icon

This example showcases how you can modify the open/close state icon for your react accordion component using the icon prop.

<CodePreview link="accordion#accordion-custom-icon" component={<AccordionExamples.AccordionCustomIcon />}>

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&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} icon={<Icon id={2} open={open} />}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          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} icon={<Icon id={3} open={open} />}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          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>
    </>
  );
}

## Accordion Custom Animation

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.

<CodePreview component={<AccordionExamples.AccordionCustomAnimation />}>

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&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} animate={CUSTOM_ANIMATION}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          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} animate={CUSTOM_ANIMATION}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          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>
    </>
  );
}

## Accordion Custom Styles

You can use Tailwind CSS classes to add custom styles to the Accordion component.

<CodePreview component={<AccordionExamples.AccordionCustomStyles />}>

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&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} 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&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} 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&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>
    </>
  );
}

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.


## Accordion Disabled

An Accordion can be disabled as well, it will help you to prevent user interactions, like click over the Accordion component.

<CodePreview link="accordion#accordion-disabled" component={<AccordionExamples.AccordionDisabled />}>

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&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}>
        <AccordionHeader onClick={() => handleOpen(2)}>
          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}>
        <AccordionHeader onClick={() => handleOpen(3)}>
          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>
    </>
  );
}

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.
## Accordion Props

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.


For TypeScript Only

import type { AccordionProps } from "@material-tailwind/react";

## Accordion Header Props

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.


For TypeScript Only

import type { AccordionHeaderProps } from "@material-tailwind/react";

## Accordion Body Props

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.


For TypeScript Only

import type { AccordionBodyProps } from "@material-tailwind/react";

## Types - Animate

Use these to animate your react accordion.

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

## Accordion Theme

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.



## Accordion Theme Object Type

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;
    };
  };
}


For TypeScript Only

import type { AccordionStylesType } from "@material-tailwind/react";

## Accordion Theme Customization

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",
        },
      },
    },
  },
};