做一个jQuery的手风琴动画效果

可以使用jQuery的slideUp()和slideDown()方法来实现手风琴动画效果。首先，需要设置每个手风琴面板的高度和宽度，然后在点击事件中使用slideUp()和slideDown()方法来切换面板的显示和隐藏。以下是一个简单的示例代码：

HTML代码：

<div class="accordion">
  <div class="panel">
    <div class="panel-heading">面板1</div>
    <div class="panel-body">面板1内容</div>
  </div>
  <div class="panel">
    <div class="panel-heading">面板2</div>
    <div class="panel-body">面板2内容</div>
  </div>
  <div class="panel">
    <div class="panel-heading">面板3</div>
    <div class="panel-body">面板3内容</div>
  </div>
</div>

CSS代码：

.accordion {
  width: 100%;
}
.panel {
  height: 100px;
  width: 100%;
  overflow: hidden;
}
.panel-heading {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
}
.panel-body {
  padding: 10px;
}

JavaScript代码：

$(document).ready(function() {
  $('.panel-heading').click(function() {
    var panelBody = $(this).next('.panel-body');
    if (panelBody.is(':visible')) {
      panelBody.slideUp();
    } else {
      $('.panel-body').slideUp();
      panelBody.slideDown();
    }
  });
});

这段代码会在页面加载完成后绑定点击事件，当点击面板标题时，会切换面板的显示和隐藏。