Hit enter after type your search item

5 Examples to Understand Using Bootstrap 5 Accordion

Bootstrap 5 Accordion

Just like older Bootstrap versions, you may create accordion or collapsible components in your web pages using the Bootstrap 5 framework – without using JavaScript.

Why use Accordion?

If you have less space on a web page and more content to show then you may create a panel line component that expands as the user clicks on the heading. In accordion, the content is pushed down rather than overlapping the top page content (like overlays).

The content hidden under the heading may be text, images or video, etc.

Bootstrap 5 has built-in classes e.g. collapse, accordion-collapse, accordion-button, etc. that you may use in combination to create panels with content on your website.

An example of a simple accordion in Bootstrap 5

In the first example, we have created an accordion component with three panels. As the web page loads, the first panel is opened with its content.

The accordion can be closed/opened by using the arrows:

Online demo and code


This is how the code worked:
  • Bootstrap 5 uses a collapse plug-in internally for making the accordion collapsible.
  • In the main <div>, the .accordion class is used
  • Inside that div, the <h2> tag is used that refers .accordion-header class for creating the heading of the panels.
  • The contents div uses accordion-collapse collapse. If you want to open that panel by default then add .show class.
  • Finally, the .card-body class is used where we placed the content.
  • Repeat the process for creating other panels with their contents.

An accordion with various color panels example

By using Bootstrap 5 color classes, you may create panels/headings with different colors. The example below uses the following color classes for creating an accordion:

  • bg-primary text-white
  • bg-success text-white
  • bg-warning text-white

You may learn more about background and text color classes.




Notice the following lines that contain heading in the code:

Keep opened accordions as other is clicked

In the above two examples, the opened panel is closed when you open another panel. In case you want to keep opened panels when a closed one is clicked, follow these things:

  • Remove or don’t use the data-bs-parent attribute on each .accordion-collapse

See the example below:




You can see, all accordions remain open.

Want to change icons to open/close accordions? See an example with circle arrows

You might wish to change the icons of the accordion that are provided by default as using the Bootstrap 5 framework.

This is simple to change. First, see an example below where we used the up/down circle arrow (svg icons) provided by Bootstrap.

Online demo and code


How to change the icon in the accordion?

  • You may see the icon list here.
  • Above the </head> tag, the <style> is used to replace the default icons.
  • You need to use accordion-button::after and accordion-button:not classes and replace the code for the icon. We used SVG provided by Bootstrap.

Styling the content area of the accordion example

Just like the panels, you may also change the background, text color, etc. of the content area of an accordion.

For that, just add the contextual background/text classes or other custom classes that you want to style the content area.

In the demo below, we just added the background color to change the look of content area:



You can see various color panels along with their content areas.

This div height required for enabling the sticky sidebar