A demo of accordion with toggle icon

Bootstrap Code		Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style> .panel-group .panel { border-radius: 5px; border-color: #EEEEEE; padding:0; } .panel-default > .panel-heading { color: #fff; background-color: #346767; border-color: #EEEEEE; } .panel-title { font-size: 14px; } .panel-title > a { display: block; padding: 15px; text-decoration: none; } .short-full { float: right; color: #fff; } .panel-default > .panel-heading + .panel-collapse > .panel-body { border: solid 1px #EEEEEE; background-color: #B7FFB7; } </style> </head> <body> <div class="container"> <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="short-full glyphicon glyphicon-plus"></i> The heading1 of panel comes here </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. <br /> Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. <br /> Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. </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="short-full glyphicon glyphicon-plus"></i> The heading2 of panel comes here </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Here you go with the content of accordion's heading 2. You may place textual information, images etc. here. </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="short-full glyphicon glyphicon-plus"></i> The heading3 of panel comes here </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Here you go with the content of accordion's heading 3. You may place textual information, images etc. here. </div> </div> </div> </div><!-- panel-group --> </div><!-- container --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script> function toggleIcon(e) { $(e.target) .prev('.panel-heading') .find(".short-full") .toggleClass('glyphicon-plus glyphicon-minus'); } $('.panel-group').on('hidden.bs.collapse', toggleIcon); $('.panel-group').on('shown.bs.collapse', toggleIcon); </script> </body> </html>		The heading1 of panel comes here Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. Here you go with the content of accordion's heading 1. You may place textual information, images etc. here. The heading2 of panel comes here Here you go with the content of accordion's heading 2. You may place textual information, images etc. here. The heading3 of panel comes here Here you go with the content of accordion's heading 3. You may place textual information, images etc. here.

The heading1 of panel comes here

The heading2 of panel comes here

The heading3 of panel comes here