Accordion

Accordions let users show and hide sections of related content on a page.

Introduction

Joy UI provides four accordion-related components:

• AccordionGroup: A container that groups multiple accordions. It does not control the state of each accordion.
• Accordion: A component that contains the expansion logic and send to AccordionSummary and AccordionDetails.
• AccordionSummary: A header of the accordion which contain a button that triggers the expansion.
• AccordionDetails: A wrapper for the accordion details.

Basics

import Accordion from '@mui/joy/Accordion';
import AccordionDetails from '@mui/joy/AccordionDetails';
import AccordionGroup from '@mui/joy/AccordionGroup';
import AccordionSummary from '@mui/joy/AccordionSummary';

Customization

Sizes

The AccordionGroup component comes in three sizes: sm, md (default), and lg.

Controlled accordion

Use the expanded prop to control the expansion state of the accordion and listen to the expansion event via onChange prop.

Disabled

Use the disabled prop to disable the accordion trigger.

Removing divider

Use disableDivider prop on the Accordion Group component to hide the divider between accordions.

Animating the expansion

Use transition prop to animate the expansion. The value can be a string if you want the transition to be the same for initial and expanded states, or an object if you want to customize the transition for each state.

The object value can contain the following keys:

• initial: the transition when the accordion is closed
• expanded: the transition when the accordion is open

Indicator

Use indicator prop to customize the indicator of the accordion.

Styling on expansion

Use sx prop on the AccordionGroup to style all the accordions at once.

Common examples

Depth panel

This example shows how to customize the accordion to create lines and depth to make it look more realistic.

User settings

This example shows how to customize the accordion and craft diverse compositions using additional components.

Accessibility

The built-in accessibility of the accordion follows WAI-ARIA Authoring Practices.

• The accordion summary has a root slot (div) that can be changed, for example using h3, based on the hierarchy of the accordion.
• The accordion summary contains a button with aria-expanded and aria-controls attributes.
• The accordion details contains a div with role="region" and aria-labelledby attributes.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Accordion />
• <AccordionDetails />
• <AccordionGroup />
• <AccordionSummary />