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:
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
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.
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.
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 |
<script> $(document).ready(function(){ $('.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="accordion"> <div class="panel panel-default"> <div class="panel-heading" data-target="#Collapseone" data-toggle="collapse" data-parent="#accordion"> <h4 class="panel-title"> <a href="#."> <span class="glyphicon glyphicon-plus"></span> What is accordion? </a> </h4> </div> <div class="panel-collapse collapse in" id="Collapseone"> <div class="panel-body"> <p>An accordion is a way of representing or grouping content in a collapsible manner. If the click the heading, the content will open and you can see the body of the content that contains the description. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-target="#Collapsetwo" data-toggle="collapse" data-parent="#accordion"> <h4 class="panel-title"> <a href="#."> <span class="glyphicon glyphicon-plus"></span> How to add plus and minus icons in accordion using bootstrap? </a> </h4> </div> <div class="panel-collapse collapse" id="Collapsetwo"> <div class="panel-body"> <p>You can add plus and minus icons to your accordion using the script and the glyphicon. Add a few more classes given here, to get the required accordion. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" data-target="#Collapsethree" data-toggle="collapse" data-parent="#accordion"> <h4 class="panel-title"> <a href="#."> <span class="glyphicon glyphicon-plus"></span> Which content class, you need to repeat to add separate content? </a> </h4> </div> <div class="panel-collapse collapse" id="Collapsethree"> <div class="panel-body"> <p>You need to repeat the class panel-default and its inner content classes to create an accordion.</p> </div> </div> </div> </div> |
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:
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 |
<script> $(document).ready(function(){ $('.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="accordion2"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#."> <span data-target="#Collapseiconone" data-toggle="collapse" data-parent="#accordion2"><span class="glyphicon glyphicon-plus"></span></span> What is accordion? </a> </h4> </div> <div class="panel-collapse collapse in" id="Collapseiconone"> <div class="panel-body"> <p>An accordion is a way of representing or grouping content in a collapsible manner. If the click the heading, the content will open and you can see the body of the content that contains the description. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#."> <span data-target="#Collapseicontwo" data-toggle="collapse" data-parent="#accordion2"><span class="glyphicon glyphicon-plus"></span></span> How to add plus and minus icons in accordion using bootstrap? </a> </h4> </div> <div class="panel-collapse collapse" id="Collapseicontwo"> <div class="panel-body"> <p>You can add plus and minus icons to your accordion using the script and the glyphicon. Add a few more classes given here, to get the required accordion. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#."> <span data-target="#Collapseiconthree" data-toggle="collapse" data-parent="#accordion2"><span class="glyphicon glyphicon-plus"></span></span> Which content class, you need to repeat to add separate content? </a> </h4> </div> <div class="panel-collapse collapse" id="Collapseiconthree"> <div class="panel-body"> <p>You need to repeat the class panel-default and its inner content classes to create an accordion.</p> </div> </div> </div> </div> |
DOWNLOAD Free Bootstrap CHEAT SHEET
You may also like to read