如何使用手风琴制作滑块？

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-title">滑块1</h3>
    <div class="accordion-content">
      滑块1的内容
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-title">滑块2</h3>
    <div class="accordion-content">
      滑块2的内容
    </div>
  </div>
  ...
</div>

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 500px; /* 根据实际内容高度调整 */
}

var accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(function(item) {
  var title = item.querySelector('.accordion-title');
  var content = item.querySelector('.accordion-content');

  title.addEventListener('click', function() {
    item.classList.toggle('active');
  });
});