Expansion Panel

mat-expansion-panel for accordion and multi-panel layouts.

Accordion

mat-accordion with single-panel expansion (default behavior).

Form fields for personal information go here.

Address input fields appear here.

Payment method selection and details.

Code
<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Personal Details</mat-panel-title>
      <mat-panel-description>Name, email, phone</mat-panel-description>
    </mat-expansion-panel-header>
    <p>Form fields for personal information go here.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Address</mat-panel-title>
      <mat-panel-description>Street, city, zip code</mat-panel-description>
    </mat-expansion-panel-header>
    <p>Address input fields appear here.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Payment</mat-panel-title>
      <mat-panel-description>Credit card or PayPal</mat-panel-description>
    </mat-expansion-panel-header>
    <p>Payment method selection and details.</p>
  </mat-expansion-panel>
</mat-accordion>

Multi Panel

mat-accordion with [multi]="true" allows multiple panels open simultaneously.

This panel stays open when you open another panel.

Both panels can remain expanded at the same time.

Code
<mat-accordion [multi]="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Panel One</mat-panel-title>
    </mat-expansion-panel-header>
    <p>This panel stays open when you open another panel.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Panel Two</mat-panel-title>
    </mat-expansion-panel-header>
    <p>Both panels can remain expanded at the same time.</p>
  </mat-expansion-panel>
</mat-accordion>