Expansion Panel

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

Accordion

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

Personal Details

Name, email, phone

Form fields for personal information go here.

Address

Street, city, zip code

Address input fields appear here.

Payment

Credit card or PayPal

Payment method selection and details.

HTML

<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.

Panel One

This panel stays open when you open another panel.

Panel Two

Both panels can remain expanded at the same time.

HTML

<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>