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 -->
<div class="accordion" id="accordionExample">

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button>
    </h2>
    <div class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" id="collapseOne">
      <div class="accordion-body">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.</div>
    </div>
  </div>

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" id="collapseTwo">
      <div class="accordion-body">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.</div>
    </div>
  </div>

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" id="collapseThree">
      <div class="accordion-body">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?</div>
    </div>
  </div>
</div>
// Accordion basic
.accordion#accordionExample

  // Accordion item
  .accordion-item
    h2.accordion-header#headingOne
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseOne", aria-expanded="true", aria-controls="collapseOne").accordion-button
        | Accordion Item #1
    div(aria-labelledby="headingOne", data-bs-parent="#accordionExample").accordion-collapse.collapse.show#collapseOne
      .accordion-body
        | 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.

  // Accordion item
  .accordion-item
    h2.accordion-header#headingTwo
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseTwo", aria-expanded="false", aria-controls="collapseTwo").accordion-button.collapsed
        | Accordion Item #2
    div(aria-labelledby="headingTwo", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseTwo
      .accordion-body
        | 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.

  // Accordion item
  .accordion-item
    h2.accordion-header#headingThree
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseThree", aria-expanded="false", aria-controls="collapseThree").accordion-button.collapsed
        | Accordion Item #3
    div(aria-labelledby="headingThree", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseThree
      .accordion-body
        | 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?

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 class="accordion accordion-light" id="accordionExample">

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button>
    </h2>
    <div class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" id="collapseOne">
      <div class="accordion-body text-light opacity-70">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.</div>
    </div>
  </div>

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" id="collapseTwo">
      <div class="accordion-body text-light opacity-70">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.</div>
    </div>
  </div>

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" id="collapseThree">
      <div class="accordion-body text-light opacity-70">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?</div>
    </div>
  </div>
</div>
// Accordion light
.accordion.accordion-light#accordionExample

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingOne
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseOne", aria-expanded="true", aria-controls="collapseOne").accordion-button
        | Accordion Item #1
    div(aria-labelledby="headingOne", data-bs-parent="#accordionExample").accordion-collapse.collapse.show#collapseOne
      .accordion-body.text-light.opacity-70
        | 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.

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingTwo
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseTwo", aria-expanded="false", aria-controls="collapseTwo").accordion-button.collapsed
        | Accordion Item #2
    div(aria-labelledby="headingTwo", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseTwo
      .accordion-body.text-light.opacity-70
        | 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.

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingThree
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseThree", aria-expanded="false", aria-controls="collapseThree").accordion-button.collapsed
        | Accordion Item #3
    div(aria-labelledby="headingThree", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseThree
      .accordion-body.text-light.opacity-70
        | 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?

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 id="accordionCards">

  <!-- Card -->
  <div class="card bg-secondary mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse1">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="IT Pro TV">
          <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>
      <h3 class="h6 card-title pt-1 mb-0">Business Analyst</h3>
    </div>
    <div class="collapse show" id="cardCollapse1" data-bs-parent="#accordionCards">
      <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='#'>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 York
            </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" data-bs-toggle="tooltip" title="Add to Wishlist">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Card -->
  <div class="card bg-secondary collapsed mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse2">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="Xbox">
          <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>
      <h3 class="h6 card-title pt-1 mb-0">Full-Stack Developer</h3>
    </div>
    <div class="collapse" id="cardCollapse2" data-bs-parent="#accordionCards">
      <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='#'>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>
              $10,000
            </span>
          </div>
          <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button" data-bs-toggle="tooltip" title="Add to Wishlist">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Card -->
  <div class="card bg-secondary collapsed mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse3">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="XAMPP">
          <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>
      <h3 class="h6 card-title pt-1 mb-0">Account Manager</h3>
    </div>
    <div class="collapse" id="cardCollapse3" data-bs-parent="#accordionCards">
      <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='#'>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>
              Los Angeles
            </span>
            <span class="text-nowrap me-3">
              <i class="fi-cash fs-base text-muted me-1"></i>
              $8,200
            </span>
          </div>
          <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button" data-bs-toggle="tooltip" title="Add to Wishlist">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
// Card based accordion
div#accordionCards

  // Card
  .card.bg-secondary.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse1")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="IT Pro TV").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 IT Pro TV
        span.badge.bg-faded-danger.rounded-pill.fs-sm Hot
      h3.h6.card-title.pt-1.mb-0 Business Analyst
    .collapse.show(id="cardCollapse1", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.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="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | New York
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $7,500
          button(type="button", data-bs-toggle="tooltip", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart
  
  // Card
  .card.bg-secondary.collapsed.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse2")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="Xbox").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 Xbox Company
        span.badge.bg-faded-accent.rounded-pill.fs-sm Featured
      h3.h6.card-title.pt-1.mb-0 Full-Stack Developer
    .collapse(id="cardCollapse2", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.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="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | Washington
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $10,000
          button(type="button", data-bs-toggle="tooltip", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart
  
  // Card
  .card.bg-secondary.collapsed.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse3")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="XAMPP").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 XAMPP Company
        span.badge.bg-faded-danger.rounded-pill.fs-sm Hot
      h3.h6.card-title.pt-1.mb-0 Account Manager
    .collapse(id="cardCollapse3", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.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="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | Los Angeles
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $8,200
          button(type="button", data-bs-toggle="tooltip", title="Add to Wishlist").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart
Top