先看效果--这个就是手风琴的效果；
原理：首先默认section1下面的dd可见，其他的全部隐藏；当点击某个obj时候，
快速隐藏全部的dd，然后只有obj.NEXT().show（）,
实现：
HTML
<dl class="accordion" id="my-accordion">
<dt>Section 1</dt>
<dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd>
<dt>Section 2</dt>
<dd>Vestibulum a velit eu ante scelerisque vulputate.</dd>
<dt>Section 3</dt>
<dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd>
<dt>Section 4</dt>
<dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd>
</dl>
css
.accordion {
width: 500px;
border: 1px solid #ccc;
border-bottom: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.accordion dt,
.accordion dd {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.accordion dt {
background: #eaeaea;
cursor: pointer;
padding: 8px 4px;
font-size: 13px;
font-weight: bold;
}
.accordion dd {
padding: 12px 8px;
}
JQ 代码：
$(function (){
//在载入的时候除了第一个 通通隐藏；
//或者 也可以在css中直接设置
$("dl>dd:gt(0)").addClass("dis");
$("dl>dt").click(function (){
$("dl>dd").each(function () {
this.style.display = "none";
}
})
$(this).next().slideDown('normal');
})
})