Skip to main content

angular bootstrap - Open an Accordion panel at a time

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Open an Accordion panel at a time
</h4>


<ngb-accordion #acc="ngbAccordion" 
  activeIds="second-panel" [closeOthers]="true">
  
  <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>
More Angular tutorials
Labels: