CODEWITHSUNDEEP
angularangular-material
unknown
unknown

Reputation: 55

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

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?

Upvotes: 3

Views: 6177

Answers (1)

JSON Derulo
JSON Derulo

Reputation: 17841

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

Upvotes: 7

Related Questions