实现jQuery手风琴动画效果完整代码

以下是实现 jQuery 手风琴动画效果的完整代码：

HTML 代码：

<div class="accordion">
  <div class="accordion-header">Section 1</div>
  <div class="accordion-content">
    <p>Content for section 1 goes here.</p>
  </div>
  <div class="accordion-header">Section 2</div>
  <div class="accordion-content">
    <p>Content for section 2 goes here.</p>
  </div>
  <div class="accordion-header">Section 3</div>
  <div class="accordion-content">
    <p>Content for section 3 goes here.</p>
  </div>
</div>

CSS 代码：

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.accordion-header {
  background-color: #eee;
  color: #333;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
}

.accordion-content {
  background-color: #fff;
  color: #333;
  padding: 10px;
  border: 1px solid #ccc;
  display: none;
}

jQuery 代码：

$(document).ready(function() {
  $('.accordion-header').click(function() {
    if ($(this).next('.accordion-content').is(':visible')) {
      $(this).next('.accordion-content').slideUp();
    } else {
      $('.accordion-content').slideUp();
      $(this).next('.accordion-content').slideDown();
    }
  });
});

这段代码实现了一个简单的手风琴效果，点击每个标题可以展开或收起对应的内容。