js 点击展开和收缩效果

引入文件

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap.min.css" />

效果

关键代码 css

<style type="text/css">
.panel-group .panel{
border:0px none;
border-radius: 0px;
box-shadow: none;
border-bottom: 1px solid #676767;
}
.panel-heading{
padding: 0;
}
.panel-default > .panel-heading {
color: #7a4b94;
}
.panel-title{
position: relative;
}
.panel-title > a{
display: block;
padding: 11px 35px;
background: #fff;
font-weight: 600;
}
.panel-title > a:hover,
.panel-title > a:focus{
text-decoration: none;
outline: none;
}
.panel-title a:before{
content: "\f068";
font-family: 'FontAwesome';
margin-right: 10px;
color:#7a4b94;
font-weight: normal;
position: absolute;
left:10px;
top:11px;
}
.panel-title .collapsed:before{
content: "\f067";
}
.panel-title a.collapsed{
color:#7a4b94;
font-weight: normal;
}
.panel-body{
color:#727272;
padding: 5px 10px 30px;
line-height: 23px;
letter-spacing: 1px;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
border-top: 0px none;
}

</style>

使用例子：

<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<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">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</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">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</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">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae
metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies
est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>