<div class="panel">
<div class="panel-header">
jQuery的核心特性
</div>
<div class="panel-body">
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。
</div>
<div class="panel-header">jQuery團隊</div>
<div class="panel-body">
2010年1月，也是jQuery的四周年生日，jQuery 1.4版發布，為了慶祝jQuery四周歲生日，jQuery團隊特別創建了jquery14.com站點，帶來了連續14天的新版本專題介紹。
</div>
<div class="panel-header">jQuery 1.4.2版發布</div>
<div class="panel-body">
2010年2月，jQuery 1.4.2版發布，它新增了有關事件委托的兩個方法：delegate()和undelegate()。delegate()用於替代1.3.2中的live()方法。這個方法比live()來的方便，而且也可以達到動態添加事件的作用。
</div>
</div>

<style>

.panel-body {
border:1px solid #ddd;
border-radius:3px;
background:#33ff33;
width:400px;
}
.panel-body:not(:nth-child(2)) {
display:none;
}

</style>

<script>

$(".panel").on("click", ".panel-header", function() {
var next = $(this).next();
next.slideToggle("slow");
$(".panel-body").not(next).slideUp();
})

</script>

link：http://www.jq22.com/webqd1853

jQuery實現手風琴效果