Accordion

<!-- Basic accordion -->
<div ngbAccordion #acc="ngbAccordion" activeIds="ngb-panel-0">
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #1</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
        This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. These classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
        It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
        limit overflow.
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #2</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
        This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. These classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
        It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
        limit overflow.
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #3</button>
  </h2>
  <div ngbAccordionBody>
    <ng-template>
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
      classes that we use to style each element. These classes control the overall appearance, as well as the showing
      and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
      It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
      limit overflow.
    </ng-template>
  </div>
</div>
</div>

<!-- Flush accordion. Use this when you need to render accordions edge-to-edge with their parent container -->
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"">
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #1</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
        This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. These classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
        It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
        limit overflow.
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #2</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
        This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
        classes that we use to style each element. These classes control the overall appearance, as well as the showing
        and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
        It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
        limit overflow.
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #3</button>
  </h2>
  <div ngbAccordionBody>
    <ng-template>
      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
      classes that we use to style each element. These classes control the overall appearance, as well as the showing
      and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
      It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does
      limit overflow.
    </ng-template>
  </div>
</div>
</div>