Bootstrap Plus Minus Accordion in Version 3, 4, and 5

Last Updated on April 9, 2024 by Roshan Parihar

In this tutorial, learn how to create a Bootstrap accordion With Plus Minus Icons. You can create a toggleable accordion with a plus/minus icon using Bootstrap.

When the accordion is open and closes on click, the plus(+) and minus(-) icon change using the javascript as given in the examples below.

How to Create Bootstrap Accordion With Plus Minus Icons

1. in Bootstrap 5

To create Bootstrap 5 accordion with plus minus icons, you can see the below example. There are three accordion items present in the example below. The attribute .data-bs-parent make sure that when one accordion item is open then rest other should be closed.

Test it Live

You can click the accordion items to check its working in Bootstrap. The reference website I am using for this is given here

2. in Bootstrap 4

To create this in Bootstrap 4, you can check the example given below. It is using the card elements to add the content and the heading of according element.

Test it Live


Accordion in Bootstrap 4

3. in Bootstrap 3

You can create a Bootstrap accordion With Plus Minus Icons. The accordion toggles on click of the anchor link given in the .panel-heading.

First create an accordion given in the tutorial of Bootstrap Collapse. After that, add the <span> element with the class .glyphicon.glyphicon-plus inside the <div> element with class .panel-title to add the plus (+) icon.

It also need to add the javascript given below to toggle the plus/minus (+ or -) icon. The script replaces the icon each time the user clicks on the accordion. See the example below given below to learn the method:

Test it Live


Bootstrap Accordion With Plus/Minus Icons Examples
Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.


You may also like to read