

Hello friends today in this article we will learn How to create Bootstrap accordion with plus minus.
Here i will provide complete source code of Bootstrap accordion with plus minus in zip file.
- Bootstrap Accordion
- Bootstrap Accordion with plus minus
- Accordion Bootstrap 4
- Accordion
HTML CODE
<div class="container demo"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="more-less fa fa-plus"></i> Savings Account </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Loan is a schemes which offers money to our member for a limit time duration. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="more-less fa fa-plus"></i> Fixed Deposit </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Loan is a schemes which offers money to our member for a limit time duration. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="more-less fa fa-plus"></i> Recurring Deposit </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Loan is a schemes which offers money to our member for a limit time duration. </div> </div> </div> </div>
CSS COE
<style type="text/css"> .panel-group .panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; } .panel-default > .panel-heading { padding: 0; border-radius: 0; color: #fff; background-color: #333; border-color: #EEEEEE; border-radius:5px; } .panel-title { font-size: 14px; } .panel-body { background:#f2f2f2; padding:10px; margin-bottom:10px; } .panel-title > a { display: block; padding: 15px; color:#fff; text-decoration: none; } .more-less { float: right; color: #fff; } body { background-color: #26a69a; } .demo { padding-top: 30px; padding-bottom:30px; } </style>