Finder Buy now

Accordion

Vertically collapsing accordions.

Bootstrap docs

Basic example

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
 <!-- Accordion basic -->
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"">
<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>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
      porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #2</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
      porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #3</button>
  </h2>
  <div ngbAccordionBody>
    <ng-template>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
    porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
    </ng-template>
  </div>
</div>
</div>

Light version

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
<!-- Accordion light -->
<div ngbAccordion #acc="ngbAccordion" activeIds="ngb-panel-0" class="accordion accordion-light">
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #1</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
      porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #2</button>
  </h2>
  <div ngbAccordionCollapse>
    <div ngbAccordionBody>
      <ng-template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
      porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
      </ng-template>
    </div>
  </div>
</div>
<div ngbAccordionItem>
  <h2 ngbAccordionHeader>
    <button ngbAccordionButton>Accordion Item #3</button>
  </h2>
  <div ngbAccordionBody>
    <ng-template>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam
    porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?
    </ng-template>
  </div>
</div>
</div>

Based on cards

IT Pro TVIT Pro TV
Hot

Business Analyst

Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. Read more...

New York$7,500
<!-- Card based accordion -->
  <div ngbAccordion #acc="ngbAccordion" activeIds="static-2" [closeOthers]="true" class="jobs-day-accordion">
  <div ngbAccordionItem id="static-1">
    <h2 ngbAccordionHeader class="accordion-header card " id="heading-2" data-bs-toggle="collapse"
      data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="assets/img/job-board/company/it-pro.png" width="24" alt="IT Pro Logo">
          <span class="fs-sm text-dark opacity-80 ps-1">IT Pro TV</span>
        </div>
        <span class="badge bg-faded-danger rounded-pill fs-sm">Hot</span>
      </div>
      <button ngbAccordionButton class="h6 card-title pt-1 mb-0">Business Analyst</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <div class="card-body mt-n1 pt-0">
            <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat,
              ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci
              enim in libero. <a href='javascript:void(0);'>Read more...</a></p>
            <div class="d-flex align-items-center justify-content-between">
              <div class="fs-sm"><span class="text-nowrap me-3"><i class="fi-map-pin text-muted me-1">
                  </i>Chicago</span><span class="text-nowrap me-3"><i
                    class="fi-cash fs-base text-muted me-1"></i>$7,500</span></div>
              <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button"
                placement="top" ngbTooltip="Add to saved jobs"><i class="fi-heart"></i></button>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
  <div ngbAccordionItem id="static-2">
    <h2 ngbAccordionHeader class="accordion-header card bg-secondary collapsed mb-2" id="heading-2"
      data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="assets/img/job-board/company/xbox.png" width="24" alt="Xbox Logo">
          <span class="fs-sm text-dark opacity-80 ps-1">Xbox Company</span>
        </div>
        <span class="badge bg-faded-accent rounded-pill fs-sm">Featured</span>
      </div>
      <button ngbAccordionButton class="h6 card-title pt-1 mb-0">Full-Stack Developer</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <div class="card-body mt-n1 pt-0">
            <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat,
              ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci
              enim in libero. <a href='javascript:void(0);'>Read more...</a></p>
            <div class="d-flex align-items-center justify-content-between">
              <div class="fs-sm"><span class="text-nowrap me-3"><i class="fi-map-pin text-muted me-1">
                  </i>Washington</span><span class="text-nowrap me-3"><i
                    class="fi-cash fs-base text-muted me-1"></i>$13,000</span></div>
              <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button"
                placement="top" ngbTooltip="Add to saved jobs"><i class="fi-heart"></i></button>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
  <div ngbAccordionItem id="static-3">
    <h2 ngbAccordionHeader class="accordion-header card bg-secondary collapsed mb-2" id="heading-2"
      data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="assets/img/job-board/company/xampp.png" width="24" alt="XAMPP Logo">
          <span class="fs-sm text-dark opacity-80 ps-1">XAMPP Company</span>
        </div>
        <span class="badge bg-faded-danger rounded-pill fs-sm">Hot</span>
      </div>
      <button ngbAccordionButton class="h6 card-title pt-1 mb-0">Account Manager</button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <div class="card-body mt-n1 pt-0">
            <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat,
              ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci
              enim in libero. <a href='javascript:void(0);'>Read more...</a></p>
            <div class="d-flex align-items-center justify-content-between">
              <div class="fs-sm"><span class="text-nowrap me-3"><i class="fi-map-pin text-muted me-1"> </i>New
                  Jersey</span><span class="text-nowrap me-3"><i
                    class="fi-cash fs-base text-muted me-1"></i>$6,500</span></div>
              <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button"
                placement="top" ngbTooltip="Add to saved jobs"><i class="fi-heart"></i></button>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
</div>
Top