手风琴代码

以下是一个简单的手风琴 HTML 和 CSS 代码示例：

HTML：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      Section 1
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod luctus dolor, vitae imperdiet eros euismod ut.
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Section 2
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      Section 3
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
    </div>
  </div>
</div>

CSS：

.accordion {
  width: 100%;
}

.accordion-item {
  border: 1px solid gray;
  border-radius: 5px;
  margin-bottom: 10px;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightgray;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-header i {
  transition: transform 0.3s ease-in-out;
}

.accordion-header.active i {
  transform: rotate(180deg);
}

.accordion-header:hover {
  background-color: gray;
}

.accordion-header.active + .accordion-content {
  display: block;
}

在这个示例中，我们使用了 Font Awesome 图标库中的“chevron-down”图标来表示手风琴展开/收起状态，并使用 CSS 进行旋转以表示展开状态。我们还使用了 jQuery 来处理手风琴的交互，但这不是必需的。