<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="panel-group wrap" id="bs-collapse">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#bs-collapse" data-toggle="collapse" href="#one">Test</a></h4>
</div>
<div class="panel-collapse collapse" id="one">
<div class="panel-body">
Lorem ipsum dolor sit amet, nec arcu mauris fermentum a, habitasse convallis arcu ut nullam, eos curabitur pulvinar consectetuer. Sit laoreet metus varius diam ligula, porta ut lacus lacus pellentesque hac, et morbi phasellus pede vulputate malesuada cras, laoreet eros pellentesque justo etiam. Ut tempus nibh, vehicula odio aliquam dictum, turpis donec. Quisque nec arcu aliquam purus leo nullam, ut aliquet mauris wisi iaculis quis tincidunt, urna proin a amet et hymenaeos vitae, vitae urna tempor fusce consequat, quisque amet ut aliquet. Nullam eros.
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#bs-collapse" data-toggle="collapse" href="#two"></a></h4>
</div>
<div class="panel-collapse collapse" id="two">
<div class="panel-body"></div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#bs-collapse" data-toggle="collapse" href="#three"></a></h4>
</div>
<div class="panel-collapse collapse" id="one">
<div class="panel-body"></div>
</div>
</div>
</div>
</div> </div>
<!-- end of container -->
h3 {
color: #fff;
font-size: 24px;
text-align: center;
margin-top: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
margin-bottom: 30px;
font-weight: 300;
}
.container {
max-width: 970px;
}
div[class*='col-'] {
padding: 0 30px;
}
.wrap {
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 4px;
}
a:focus,
a:hover,
a:active {
outline: 0;
text-decoration: none;
}
.panel {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #fff;
background: none;
box-shadow: none;
}
.panel:last-child {
border-bottom: none;
}
.panel-group > .panel:first-child .panel-heading {
border-radius: 4px 4px 0 0;
}
.panel-group .panel {
border-radius: 0;
}
.panel-group .panel + .panel {
margin-top: 0;
}
.panel-heading {
background-color: #0072AE;
border-radius: 0;
border: none;
color: #fff;
padding: 0;
}
.panel-title a {
display: block;
color: #fff;
padding: 15px;
position: relative;
font-size: 22px;
font-weight: 400;
}
.panel-body {
background: #fff;
}
.panel:last-child .panel-body {
border-radius: 0 0 4px 4px;
}
.panel:last-child .panel-heading {
border-radius: 0 0 4px 4px;
transition: border-radius 0.3s linear 0.2s;
}
.panel:last-child .panel-heading.active {
border-radius: 0;
transition: border-radius linear 0s;
}
/* #bs-collapse icon scale option */
.panel-heading a:before {
content: '\e146';
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
font-size: 24px;
transition: all 0.5s;
transform: scale(1);
}
.panel-heading.active a:before {
content: ' ';
transition: all 0.5s;
transform: scale(0);
}
#bs-collapse .panel-heading a:after {
content: ' ';
font-size: 24px;
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
transform: scale(0);
transition: all 0.5s;
}
#bs-collapse .panel-heading.active a:after {
content: '\e909';
transform: scale(1);
transition: all 0.5s;
}
/* #accordion rotate icon option */
#accordion .panel-heading a:before {
content: '\e316';
font-size: 24px;
position: absolute;
font-family: 'Material Icons';
right: 5px;
top: 10px;
transform: rotate(180deg);
transition: all 0.5s;
}
#accordion .panel-heading.active a:before {
transform: rotate(0deg);
transition: all 0.5s;
}
$(document).ready(function () {
$('.collapse.in').prev('.panel-heading').addClass('active');
$('#accordion, #bs-collapse')
.on('show.bs.collapse', function (a) {
$(a.target).prev('.panel-heading').addClass('active');
})
.on('hide.bs.collapse', function (a) {
$(a.target).prev('.panel-heading').removeClass('active');
});
});
