Simple Accordion
This is the first item's accordion body.
It is shown by default.
This is the second item's accordion body.
This is the third item's accordion body.
<div class="accordion app-accordion accordion-dark">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">Content</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">Content</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">Content</div>
</div>
</div>
</div>
Outline Accordion
This is the first item's accordion body.
It is shown by default.
This is the second item's accordion body.
This is the third item's accordion body.
<div class="app-btn-list">
<div class="accordion app-accordion accordion-outline-dark">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon accordion-border-danger"
data-bs-toggle="collapse" data-bs-target="#collapseFour">
Accordion Item #1
</button>
</h2>
<div id="outlineAccordion" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapseFive">
Accordion Item #2
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapseSix">
Accordion Item #3
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong>
</div>
</div>
</div>
</div>
Accordion with Profile
Ethan Walker’s profile information has been refreshed.
The latest update includes revised contact details and improved account settings.
Lucas Bennett made changes to his profile information.
He updated personal details and privacy options.
Ava Mitchell recently reviewed her account settings.
She refined notification preferences and contact details.
<div class="accordion app-accordion accordion-outline-secondary">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon accordion-border-danger"
data-bs-toggle="collapse" data-bs-target="#collapseSeven">
<div class="d-flex align-items-center gap-2">
<div class="btn-group btn-rtl">
<div class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-secondary b-3-dark profile-img">
<img src="https://pinmeets.com/assets/images/avatar/05.png" class="img-fluid" alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Ethan Walker</div>
<p class="text-muted f-s-12 mb-0">App Developer</p>
</div>
</div>
</button>
</h2>
<div id="collapseSeven" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>Ethan Walker’s profile information has been refreshed.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapseEight">
<div class="d-flex align-items-center gap-2">
<div class="btn-group btn-rtl">
<div class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-light b-3-dark profile-img">
<img src="https://pinmeets.com/assets/images/avatar/02.png" class="img-fluid" alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Lucas Bennett</div>
<p class="text-muted f-s-12 mb-0">Web Developer</p>
</div>
</div>
</button>
</h2>
<div id="collapseEight" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Lucas Bennett made changes to his profile information.</strong>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapseNine">
<div class="d-flex align-items-center gap-2">
<div class="btn-group btn-rtl">
<div class="h-50 w-50 b-r-50 overflow-hidden bg-gradient-primary b-3-dark profile-img">
<img src="https://pinmeets.com/assets/images/avatar/16.png" class="img-fluid" alt="">
</div>
</div>
<div class="ms-1">
<div class="f-s-15 mb-0">Ava Mitchell</div>
<p class="text-muted f-s-12 mb-0">Web Designer</p>
</div>
</div>
</button>
</h2>
<div id="collapseNine" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Ava Mitchell recently reviewed her account settings.</strong>
</div>
</div>
</div>
</div>
Accordions with Icon
Discover exciting destinations
around the world and plan your next journey with ease. Save your favorite places, explore recommended attractions, and create a travel list that inspires your future adventures.
Continue your reading journey
explore your saved books, track progress, and find recommended reads to expand your knowledge and enjoyment.
Discover delicious recipes
find new food ideas, save favorites, and plan meals to enjoy tasty dishes at home or while traveling.
<div class="accordion app-accordion accordion-dark">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon accordion-border-danger"
data-bs-toggle="collapse" data-bs-target="#collapseten">
<div class="d-flex align-items-center gap-2">
<i class="ti ti-plane-tilt f-s-25 text-success"></i>
<div class="ms-1">
<div class="f-s-15 mb-0">Travel Ideas</div>
<p class="f-s-12 mb-0">Explore a new <span class="text-primary">destination</span></p>
</div>
</div>
</button>
</h2>
<div id="collapseten" class="accordion-collapse collapse show">
<div class="accordion-body">
<strong>Discover exciting destinations</strong>
around the world and plan your next journey with ease.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapse11">
<div class="d-flex align-items-center gap-2">
<i class="ti ti-book f-s-25 text-primary"></i>
<div class="ms-1">
<div class="f-s-15 mb-0">Bookshelf</div>
<p class="f-s-12 mb-0"><span class="text-danger">Continue</span> reading your saved book</p>
</div>
</div>
</button>
</h2>
<div id="collapse11" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Discover exciting destinations</strong>
around the world and plan your next journey with ease.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon collapsed"
data-bs-toggle="collapse" data-bs-target="#collapse12">
<div class="d-flex align-items-center gap-2">
<i class="ti ti-eggs f-s-25 text-warning"></i>
<div class="ms-1">
<div class="f-s-15 mb-0">Food Picks</div>
<p class="f-s-12 mb-0"><span class="text-info">Try</span> a <span class="text-success">new</span> recipe today</p>
</div>
</div>
</button>
</h2>
<div id="collapse12" class="accordion-collapse collapse">
<div class="accordion-body">
<strong>Discover exciting destinations</strong>
around the world and plan your next journey with ease.
</div>
</div>
</div>
</div>
Accordion With Righr Side Icon
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the first item's accordion body. These classes control the overall appearance,
as well as showing and hiding via CSS transitions.
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the second item's accordion body. These classes control the overall appearance,
as well as showing and hiding via CSS transitions.
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the third item's accordion body. These classes control the overall appearance,
as well as showing and hiding via CSS transitions.
<div class="accordion app-accordion accordion-flush accordion-light-secondary"
id="collapse13">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon2"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="appflush-collapseOne" class="accordion-collapse show"
data-bs-parent="#collapse13">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon3 collapsed"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="appflush-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button accordion-icon4 collapsed"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="appflush-collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
</div>
Flush(No border)
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the first item's accordion body. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the second item's accordion body. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
Placeholder content for this accordion,
which demonstrates the
.accordion-appflush class.
This is the third item's accordion body. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
<div class="app-btn-list">
<div class="accordion app-accordion accordion-flush accordion-secondary"
id="accordionappflushExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseFour">
<i class="ti ti-message-report me-1 f-s-20"></i>
Accordion Item #1
</button>
</h2>
<div id="appflush-collapseFour" class="accordion-collapse show"
data-bs-parent="#accordionappflushExample">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseFive">
<i class="ti ti-ticket me-1 f-s-20"></i>
Accordion Item #2
</button>
</h2>
<div id="appflush-collapseFive" class="accordion-collapse collapse"
data-bs-parent="#accordionappflushExample">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#appflush-collapseSix">
<i class="ti ti-transition-bottom me-1 f-s-20"></i>
Accordion Item #3
</button>
</h2>
<div id="appflush-collapseSix" class="accordion-collapse collapse">
<div class="accordion-body">
Placeholder content for this accordion,
demonstrating the <code>.accordion-appflush</code> class.
</div>
</div>
</div>
</div>
