<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br><br>
<div class="container">
<div class="row">
<h1 align="center"> jQuery with Bootstrap 3 Accordion</h1><hr><br>
<div class="col-md-9 col-md-offset-1">
<div class="panel panel-default panel_default">
<div class="panel-heading">
<h3>Accordion heading <span class="pull-right glyphicon glyphicon-plus"></span></h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="panel-heading">
<h3>Accordion heading <span class="pull-right glyphicon glyphicon-plus"></span></h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="panel-heading">
<h3>Accordion heading <span class="pull-right glyphicon glyphicon-plus"></span></h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="panel-heading">
<h3>Accordion heading <span class="pull-right glyphicon glyphicon-plus"></span></h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div><!-- .panel panel-default -->
</div><!-- .col-md-6 col-md-offset-3 -->
<div class="col-md-6"></div>
</div><!-- .row -->
</div><!-- .container -->
<br><br>
.panel_default {
border-color: transparent;
box-shadow: 0 0;
padding: 0 !important;
margin: 0 !important;
}
.panel_default .panel-body{
display: none;
padding-top: 10px;
margin-top: -5px;
padding-bottom: 0px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.panel_default .panel-heading {
color: #fff;
background-color: #428bca !important;
border-color: #fff;
margin-bottom: 5px;
border-radius:0;
padding: 10px 15px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.panel_default .panel-heading h3 {
font-size: 15px;
margin: 5px;
}
.panel_default .panel-heading .glyphicon {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.2);
padding: 2px;
margin-top: -7px;
}
$(function() {
//$('.panel_default .panel-body:eq(0)').stop().slideDown('slow');
$(".panel_default .panel-heading").on("click", function(){
$(this).parents('.panel_default').find('.panel-body').stop().slideUp(100);
$('.glyphicon').removeClass('glyphicon glyphicon-minus').addClass('glyphicon glyphicon-plus')
if($(this).next('.panel_default .panel-body').stop().slideUp())
{
$(this).next('.panel_default .panel-body').stop().slideDown(100);
$(this).find('.glyphicon').addClass('glyphicon glyphicon-plus glyphicon glyphicon-minus')
}
});
});
