.accordion {
width: 100%;
}
.accordion-header {
background-color: #333;
color: #fff;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid #666;
}
.accordion-header:hover {
background-color: #555;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.accordion-content-active {
max-height: 500px;
transition: max-height 0.3s ease-in;
}
.accordion-header.active {
background-color: #555;
}首先，大家需要一个包含头部和内容的容器。头部和内容的部分都是通过div元素来实现的，然后大家会为它们添加CSS样式。需要注意的是，内容部分一开始是不可见的。
头部一内容一头部二内容二头部三内容三
接下来，大家通过CSS来实现动画效果。.accordion-header类表示头部样式，.accordion-content类表示内容样式。大家给内容部分添加了一个max-height属性，在执行动画时，它的值会从0逐渐变到最大高度，实现了展开效果。.accordion-header.active类表示当前打开的头部样式。
最后，大家需要使用jQuery来实现鼠标点击事件，来使得效果展开和收缩，示例代码如下。
$('.accordion-header').on('click', function() {
$(this).toggleClass('active');
$(this).next('.accordion-content').toggleClass('accordion-content-active');
});这样就实现了一个完整的CSS3手风琴动画效果。