Accordion
Vertically collapsing accordions.
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 TV](../img/job-board/company/it-pro.png)
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
![Xbox](../img/job-board/company/xbox.png)
Full-Stack Developer
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...
Washington$10,000
![XAMPP](../img/job-board/company/xampp.png)
Account Manager
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...
Los Angeles$8,200
<!-- 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