Skip to main content

angular material - Open & close Accordion all panels at once

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material -
    How to open and close Accordion all panels at once
</h2>


<div style="margin-bottom:25px;">
  <button mat-raised-button color="primary"
    (click)="accordion.openAll()">
      Open All Panels
  </button>
  &nbsp;
  <button mat-raised-button color="accent"
    (click)="accordion.closeAll()">
      Close All Panels
  </button>
</div>


<mat-accordion multi #accordion="matAccordion">
    
  <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>Python</mat-panel-title>
      </mat-expansion-panel-header>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer vitae semper massa. Donec maximus, dui nec
      dignissim blandit, ante odio varius ex,
      nec volutpat erat justo ac magna.
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Django</mat-panel-title>
    </mat-expansion-panel-header>
    Vivamus ornare ipsum sit amet imperdiet laoreet.
    Cras maximus elementum varius. Integer nisi tellus,
    dapibus vitae neque non, tempor vehicula velit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>METEOR</mat-panel-title>
    </mat-expansion-panel-header>
    Sed vitae felis id velit luctus elementum ut quis nisl. Curabitur
    consectetur, ipsum eget vulputate mattis, odio dolor hendrerit
    massa, eget scelerisque justo tellus eu lectus.
  </mat-expansion-panel>

</mat-accordion>
app.module.ts [import] 

import {MatExpansionModule} from '@angular/material/expansion'
import { MatButtonModule } from '@angular/material/button'
More Angular tutorials
Labels: