Bootstrap Accordion
Bootstrap / CSS / HTML

Plus Minus icon with Bootstrap Accordion

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.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *