Bootstrap Accordion With Plus/Minus Icons Examples

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

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

Output

Bootstrap Accordion With Plus/Minus Icons Examples

Click the links given in the headings to toggle the accordion. The accordion will not toggle on click of heading to the other place except the link. If you want to create an accordion that toggles plus-minus icons on click of a header to anywhere, you have to read further.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

Other Useful Examples to Create Accordion with Plus/Minus Icons

Here are the other two useful examples to create an accordion:

Toggle Bootstrap Accordion on Whole Header Click

To create an accordion to toggle on the heading click on anywhere. You need to remove the attributes from the anchor link given in the heading and place attributes to the div with class .panel-heading. After placing the attributes, change the attribute href to data-target.

Check the example given below to understand the work and create your own accordion.

Test it Live

Accordion Toggle on Click of Plus/Minus Icons

You can create a Bootstrap accordion With Plus Minus Icons to toggle only on the click of the plus-minus icons and not on the anchor links or the headers. Put the attributes in the span tag used before the glyphicons. See the example below to create the accordion:

Test it Live

DOWNLOAD Free Bootstrap CHEAT SHEET

You may also like to read