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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<div class="container"> <div class="row"> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div> </div> </div> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<script> $(document).ready(function(){ //Add a minus icon to the collapse element that is open by default $('.collapse.show').each(function(){ $(this).parent().find(".fa").removeClass("fa-plus").addClass("fa-minus"); }); //Toggle plus/minus icon on show/hide of collapse element $('.collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".fa").removeClass("fa-plus").addClass("fa-minus"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".fa").removeClass("fa-minus").addClass("fa-plus"); }); }); </script> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"> <i class="fa fa-plus"></i> Accordion Group Item #1 </button> </div> <div class="collapse show" id="collapseOne" data-parent="#accordionExample"> <div class="card-body"> This is the collapsible content for the first accordion panel. </div> </div> </div> <div class="card"> <div class="card-header"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo"> <i class="fa fa-plus"></i> Accordion Group Item #2 </button> </div> <div class="collapse" id="collapseTwo" data-parent="#accordionExample"> <div class="card-body"> This is the collapsible content for the second accordion panel. </div> </div> </div> <div class="card"> <div class="card-header"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"> <i class="fa fa-plus"></i> Accordion Group Item #3 </button> </div> <div class="collapse" id="collapseThree" data-parent="#accordionExample"> <div class="card-body"> This is the collapsible content for the third accordion panel. </div> </div> </div> </div><!-- .accordion --> |
Output
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script> $(document).ready(function(){ $('.collapse.in').each(function(){ $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }); $('.collapse').on('shown.bs.collapse', function(){ $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); }).on('hidden.bs.collapse', function(){ $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); }); }); </script> <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button class="btn btn-link" data-target="#Exampleone" data-toggle="collapse" data-parent="#accordion1"> <span class="glyphicon glyphicon-plus"></span> Collapse Heading one </button> </h4> </div> <div class="panel-collapse collapse in" id="Exampleone"> <div class="panel-body"> <p>This is the collapsed content one.</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button class="btn btn-link" data-target="#Exampletwo" data-toggle="collapse" data-parent="#accordion1"> <span class="glyphicon glyphicon-plus"></span> Collapse Heading two </button> </h4> </div> <div class="panel-collapse collapse" id="Exampletwo"> <div class="panel-body"> <p>This is the collapsed content two.</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <button class="btn btn-link" data-target="#Examplethree" data-toggle="collapse" data-parent="#accordion1"> <span class="glyphicon glyphicon-plus"></span> Collapse Heading three </button> </h4> </div> <div class="panel-collapse collapse" id="Examplethree"> <div class="panel-body"> <p>This is the collapsed content three.</p> </div> </div> </div> </div> |
Output
Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.
DOWNLOAD Free Bootstrap CHEAT SHEET
You may also like to read