How to only allow one mat-expansion-panel to be open at a time?

Issue

I have several mat-extension-panels on my project. As expected, when I click them, they open and stay open until they are clicked shut. I would like it so that only one of the panels can be open at a time. That is, if a panel is already open when another is clicked, it should close the open panel and open the new one. Is this possible to do in Angular? How can I go about this modification?

Solution

According with docs you should wrap them with mat-accordion

<mat-accordion>
  <mat-expansion-panel>
  </mat-expansion-panel>

  <mat-expansion-panel>
  </mat-expansion-panel>
</mat-accordion>

Answered By - Luis Reinoso