Skip to main content

angular bootstrap - How to collapse Accordion all panels

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to collapse Accordion all panels
</h4>


<ngb-accordion #acc="ngbAccordion">
  
  <ngb-panel title="First Panel" id="first-panel">
    <ng-template ngbPanelContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In egestas felis eget nisi porttitor, et faucibus est interdum.
    </ng-template>
  </ngb-panel>

  <ngb-panel title="Second Panel" id="second-panel">
    <ng-template ngbPanelContent>
      Vivamus nec enim vel metus sodales hendrerit.
      Curabitur imperdiet condimentum eleifend.
      Integer diam tortor, dapibus eget nisi vel, vestibulum varius quam.
    </ng-template>
  </ngb-panel>

  <ngb-panel title="Third Panel" id="third-panel">
    <ng-template ngbPanelContent>
      Proin ultrices urna fermentum quam porttitor interdum.
      Phasellus id erat elit. Morbi et bibendum est.
      Mauris nec fermentum eros, id facilisis orci.
      Donec luctus consectetur tortor sed malesuada.
    </ng-template>
  </ngb-panel>

</ngb-accordion>

<button 
  class="btn btn-danger btn-sm m-2" 
  (click)="acc.collapseAll()">
    Collapse All Panels
</button>
More Angular tutorials
Labels: