🎉 Material UI v4 is out now! Check out the announcement blog post →
Expansion Panels

Expansion Panels

Expansion panels contain creation flows and allow lightweight editing of an element.

An expansion panel is a lightweight container that may either stand alone or be connected to a larger surface, such as a card.

Note: Expansion panels are no longer documented in the Material Design documentation.

Simple Expansion Panel

Controlled Accordion

Extend the default panel behavior to create an accordion with the ExpansionPanel component.

Secondary heading and Columns

Multiple columns can be used to structure the content, and a helper text may be added to the panel to assist the user.

Location

Select trip destination

Barbados
Select your destination of choice
Learn more

Customized Expansion Panel

If you have been reading the overrides documentation page but you are not confident jumping in, here is one example of how you can customize the background color of the ExpansionPanelSummary and padding of ExpansionPanelDetails.

⚠️ While the material design specification encourages theming, these examples are off the beaten path.

Collapsible Group Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.