Overview for expansion

<mat-expansion-panel> provides an expandable details-summary view.

Basic expansion panel

This is the primary content of the panel.

I'm visible because I am open

The <mat-expansion-panel-header> shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an <mat-panel-title> and an <mat-panel-description>, which format the content of the header to align with Material Design specifications.

<mat-expansion-panel hideToggle>
  <mat-expansion-panel-header>
    <mat-panel-title> This is the expansion title </mat-panel-title>
    <mat-panel-description> This is a summary of the content </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is the primary content of the panel.</p>
</mat-expansion-panel>

By default, the expansion-panel header includes a toggle icon at the end of the header to indicate the expansion state. This icon can be hidden via the hideToggle property.

<mat-expansion-panel hideToggle>

Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its expanded state.

<mat-action-row>
  <button mat-button (click)="nextStep()">Next</button>
</mat-action-row>

Expansion panels can be disabled using the disabled attribute. A disabled expansion panel can't be toggled by the user, but can still be manipulated programmatically.

<mat-expansion-panel disabled>

Multiple expansion-panels can be combined into an accordion. The multi="true" input allows the expansions state to be set independently of each other. When multi="false" (default) just one panel can be expanded at a given time:

<mat-accordion class="example-headers-align" multi>

By default, the expansion panel content will be initialized even when the panel is closed. To instead defer initialization until the panel is open, the content should be provided as an ng-template:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

MatExpansionPanel imitates the experience of the native <details> and <summary> elements. The expansion panel header applies role="button" and the aria-controls attribute with the content element's ID.

Because expansion panel headers are buttons, avoid adding interactive controls as children of <mat-expansion-panel-header>, including buttons and anchors.

Azure & Blue theme selected.