How to make angular material expansion panel to expand only one at a time

user_14291979 0
Viewed 2764

I created a mat expansion panel. I want to make only one expandable at a time. Means when one particular record is expanded, and when i click on another record of mat expansion, then other record of mat expansion should close. Is there any way to do it?

angular-material angular
1 Answers

You just need to wrap your expansion panels in a mat-accordion (see docs)

Make sure to set multi to false to disallow multiple expansion panels to be opened at the same time.

<mat-accordion [multi]="false">
  <mat-expansion-panel></mat-expansion-panel>
  <mat-expansion-panel></mat-expansion-panel>
</mat-accordion>

Here is a live example

user_54705440
Related