One other very cool UI component is accordions, or expansion panels. It's very handy to use when we need to group data together. We will need to use <mat-accordion> and <mat-expansion-panel>, which are provided in the MatExpansionModule module, to implement the accordion functionality in our application. Take a look at the following sample code:

<mat-card class="z-depth" >
 <mat-card-title>Material Expansion Panels</mat-card-title>
 <mat-card-content>
<mat-accordion>
 <mat-expansion-panel>
 <mat-expansion-panel-header>
 <mat-panel-title>
 Personal Details
 </mat-panel-title>
 </mat-expansion-panel-header>
</mat-expansion-panel>
 <mat-expansion-panel >
 <mat-expansion-panel-header>
 <mat-panel-title>
 Professional Details
 </mat-panel-title>
 <mat-panel-description>
 </mat-panel-description>
 </mat-expansion-panel-header>
 <p>I'm visible because I am open</p>
 </mat-expansion-panel>
</mat-accordion>
 </mat-card-content>
</mat-card>

Each <mat-expansion-panel> will have a <mat-expansion-panel-header>, where we can provide the title and description for the expansion panel, and we place the content inside the <mat-expansion-panel> directive itself. The output of the preceding code is as follows:

There will be use cases where we need to walk the user through a series of steps. That's where our next component comes into the picture. It's called a stepper. As the name suggests, this will be used to design steps either horizontally or vertically, and will group a series of steps that the user can navigate to.