Skip to main content

angular bootstrap - Toggle Accordion panel on button click

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Toggle Accordion panel on button click
</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.
      Nullam est dui, porttitor vitae placerat eget, malesuada ut urna.
    </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.
      Nullam vel enim lacinia, efficitur tortor dignissim, dignissim turpis.
      Pellentesque nec pellentesque nunc.
    </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.
      Nam egestas et leo id convallis.
      Vestibulum egestas tincidunt ante, mollis ultrices mauris placerat eu.
      Ut placerat ipsum ac facilisis tincidunt.
    </ng-template>
  </ngb-panel>

</ngb-accordion>

<button 
  class="btn btn-success btn-sm m-2" 
  (click)="acc.toggle('first-panel')">
    Toggle First Panel
</button>

<button 
  class="btn btn-info btn-sm m-2" 
  (click)="acc.toggle('second-panel')">
    Toggle Second
</button>

<button 
  class="btn btn-danger btn-sm m-2" 
  (click)="acc.toggle('third-panel')">
    Toggle Third
</button>
More Angular tutorials
Labels: