The accordion component allows the user to show and hide sections of related content on a page.
- -An accordion is a lightweight container that may either be used standalone, or be connected to a larger surface, such as a card. +The Accordion component lets users show and hide sections of related content on a page.
{{"component": "modules/components/ComponentLinkHeader.js"}} +## Introduction + +The Material UI Accordion component includes several complementary utility components to handle various use cases: + +- Accordion: the wrapper for grouping related components. +- Accordion Summary: the wrapper for the Accordion header, which expands or collapses the content when clicked. +- Accordion Details: the wrapper for the Accordion content. +- Accordion Actions: an optional wrapper that groups a set of buttons. + +{{"demo": "AccordionUsage.js", "bg": true}} + :::info This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it. ::: -## Basic accordion +## Basics + +```jsx +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; +``` + +### Expand icon + +Use the `expandIcon` prop on the Accordion Summary component to change the expand indicator icon. +The component handles the turning upside-down transition automatically. + +{{"demo": "AccordionExpandIcon.js", "bg": true}} + +### Expanded by default + +Use the `defaultExpanded` prop on the Accordion component to have it opened by default. + +{{"demo": "AccordionExpandDefault.js", "bg": true}} + +### Transition + +Use the `TransitionComponent` and `TransitionProps` props to change the Accordion's default transition. + +{{"demo": "AccordionTransition.js", "bg": true}} -{{"demo": "BasicAccordion.js", "bg": true}} +### Disabled item -## Controlled accordion +Use the `disabled` prop on the Accordion component to disable interaction and focus. + +{{"demo": "DisabledAccordion.js", "bg": true}} + +### Controlled Accordion The Accordion component can be controlled or uncontrolled. +{{"demo": "ControlledAccordions.js", "bg": true}} + :::info - A component is **controlled** when it's managed by its parent using props. @@ -35,34 +75,55 @@ The Accordion component can be controlled or uncontrolled. Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -{{"demo": "ControlledAccordions.js", "bg": true}} - ## Customization -Here is an example of customizing the component. -You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). +### Only one expanded at a time -{{"demo": "CustomizedAccordions.js"}} +Use the `expanded` prop with React's `useState` hook to allow only one Accordion item to be expanded at a time. +The demo below also shows a bit of visual customziation. + +{{"demo": "CustomizedAccordions.js", "bg": true}} ## Performance -The content of Accordions is mounted by default even if the accordion is not expanded. +The Accordion content is mounted by default even if it's not expanded. This default behavior has server-side rendering and SEO in mind. -If you render expensive component trees inside your accordion details or simply render many -accordions it might be a good idea to change this default behavior by enabling the -`unmountOnExit` in `TransitionProps`: + +If you render the Accordion Details with a big component tree nested inside, or if you have many Accordions, you may want to change this behavior by setting `unmountOnExit` to `true` inside the `TransitionProps` prop to improve performance: ```jsx