
Plus Minus icon with Bootstrap Accordion

There is a possibility that you may want to show the plus minus icon with bootstrap accordion while collapsing and expanding the panels.
Note: This solution is tested with Bootstrap 3.4.1. You can customize the given CSS in case you are using Bootstrap 4.
Plus Minus icon with bootstrap accordion
I am sharing the HTML. Which will help you to understand how does it work?
<div class="panel-group has-plus-minus" id="accordian"> <div class="panel panel-default"> <div class="panel-heading" data-toggle="collapse" data-parent="#accordian" href="#collapse1"> <h4 class="panel-title">Collapse 1</h4> </div> <div id="collapse1" class="collapse in"> <div class="panel-body">Hello World !</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordian" href="#collapse2"> <h4 class="panel-title">Collapse 2</h4> </div> <div id="collapse2" class="collapse"> <div class="panel-body">Hello Test !</div> </div> </div> </div>
So here is the CSS which will do the task perfectly.
CSS:
.panel-group.has-plus-minus .panel-title:after { content: '\2212'; position: relative; top: -1px; display: inline-block; font-family: 'Glyphicons Halflings'; float: right; } .panel-group.has-plus-minus .panel-heading.collapsed .panel-title:after { content:"\2b"; }
Thanks for visiting.