🤩
Windframe Import update is finally here!

Accordion

Bootstrap 5 Accordion

Bootstrap 5 Accordion allows the content to be organized in a collapsible item. With a single click, they can cycle through a variety of text blocks. This attribute contributes to a positive user experience.

Applications of Bootstrap Accordion are:

  • FAQ page

  • Multiple items presentation

  • Data tables

Default Accordion

Bootstrap Accordion

Script
js
[].slice
.call(document.querySelectorAll('[role=cdb-accordion]'))
.forEach(progress => {
new CDB.Accordion(progress);
});
HTML
html
<div role="cdb-accordion" class="cdb-accordion">
<div class="accordion">
<h2 class="accordion-header">Accordion 1</h2>
<div class="accordion-panel">
Curabitur vel aliquam nisi. Suspendisse sodales sem at sodales pulvinar. Duis vehicula risus odio, id sagittis ante elementum in. Vestibulum ornare pulvinar risus at tincidunt. Nullam porttitor ullamcorper dictum. Curabitur eu nisi tempor, rhoncus nisi ut, luctus ex.
</div>
</div>
<div class="accordion">
<h2 class="accordion-header">Accordion 2</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellus.
</div>
</div>
<div class="accordion">
<h2 class="accordion-header">Accordion 3</h2>
<div class="accordion-panel">
Curabitur vel aliquam nisi. Suspendisse sodales sem at sodales pulvinar. Duis vehicula risus odio, id sagittis ante elementum in. Vestibulum ornare pulvinar risus at tincidunt. Nullam porttitor ullamcorper dictum. Curabitur eu nisi tempor, rhoncus nisi ut, luctus ex.
</div>
</div>
<div class="accordion">
<h2 class="accordion-header">Accordion 4</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellusr.
</div>
</div>
</div>

Accordion without Icon

With Contrast Bootstrap Accordion, you can construct an Accordion without the caret icon by adding the no-icon class to the h2 element

Bootstrap Accordion with icons

Script
js
[].slice
.call(document.querySelectorAll('[role=cdb-accordion]'))
.forEach(progress => {
new CDB.Accordion(progress);
});
HTML
html
<div role="cdb-accordion" class="cdb-accordion">
<div class="accordion">
<h2 class="accordion-header no-icon">Accordion 1</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellus
</div>
</div>
<div class="accordion">
<h2 class="accordion-header no-icon">Accordion 2</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellus
</div>
</div>
<div class="accordion">
<h2 class="accordion-header no-icon">Accordion 3</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellus
</div>
</div>
<div class="accordion">
<h2 class="accordion-header no-icon">Accordion 4</h2>
<div class="accordion-panel">
Pellentesque neque nulla, volutpat a lacus non, euismod molestie velit. Nulla vitae elit blandit, placerat risus non, rutrum odio. Phasellus et nisl eget dui pulvinar rutrum. Nulla in nulla a lectus accumsan varius vel vitae metus. Phasellus ac finibus elit. Etiam at commodo diam. Pellentesque erat tellus, semper quis maximus in, iaculis vitae tellus.
</div>
</div>
</div>
</div>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast