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

Accordion 1
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 2
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 3
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 4
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.

JavaScript

[].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

Accordion 1
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 2
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 3
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.
Accordion 4
nibh, sollicitudin fringilla ante placerat eget. In in vulputate neque. Mputate tellus ut sodales interdum. Nam non diam aliquam, iaculis enim vitae, imperdiet eros. Praesent lacinia pretium ante, quis rhon Donec sed lectus diam. Quisque a vehicula tortor, at viverra quam. Vecus ex auris eu tortor in est porttitor efficiturFusce sit amet purus id lacCurabitur posuere ligulaus rutrum dapibus. Fusce et dictum nisi, in vs lacus. Nam sit amet mauris ut sapien varius tincidunt in in velit.stibolutpat leo. in vel risus. Aliquam dignissim lectus sit amet odio malesuada eleifend. Quisque ligula erat, vestibulum vel massa nec, lobortis convalliulum posuere sem eu erat egestas, ut tempor sem ultrices. Curabitur vulaliquam vitae. Maecenas et eros nec leo ultrices rhoncus eget ac odio.

JavaScript

[].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>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Table

Alert