I need to implement a feature where expansion panels are loaded in a nested mode. Each expansion panel will have a sub-panel, and those sub-panels might also contain similar nested panels. For example:
<!--pseudo-code below-->
<mat-accordion>
<mat-expansion-panel> Level-1
<mat-accordion>
<mat-expansion-panel>Level-2
<mat-accordion>
<mat-expansion-panel>Level-3
</mat-expansion-panel>
<mat-expansion-panel>Level-3
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel>
</mat-expansion-panel>
</mat-accordion>
</mat-expansion-panel>
<mat-expansion-panel> Level-1
</mat-expansion-panel>
</mat-accordion>In this scenario, if all the panels up to level-3 are expanded and I click on the header of a level-1 panel, the level-1 panel closes while the level-3 panel remains visible on the page. This causes a cluttered view, contrary to my expectations. Is there a specific configuration or property binding that needs to be set in order for child expansion panels at inner levels to collapse automatically, maintaining a clean view?