Accordion
Accordions let users show and hide sections of related content on a page.
Introduction
Joy UI provides four accordion-related components:
- Accordion Group - 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.
- Accordion Summary - a header of the accordion which contain a button that triggers the expansion.
- Accordion Details - a wrapper for the accordion details.
<AccordionGroup>
<Accordion>
<AccordionSummary>Title</AccordionSummary>
<AccordionDetails>Content</AccordionDetails>
</Accordion>
</AccordionGroup>
Playground
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';
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 closedexpanded
: the transition when the accordion is open
The AccordionGroup supports the transition
prop to customize the animation of the panel. You can provide a string value or an object to fine tune the animation at the initial and expanded states.
Absolutely yes! an by the way, it is pure CSS.
The panel is a CSS Grid which can be transitioned by the grid-template-rows
property.
<AccordionGroup transition="0.2s ease">
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 usingh3
, based on the hierarchy of the accordion. - The accordion summary contains a button with
aria-expanded
andaria-controls
attributes. - The accordion details contains a div with
role="region"
andaria-labelledby
attributes.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.