手风琴内容出现和消失的滑动效果

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">标题1</div>
    <div class="accordion-content">内容1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">标题2</div>
    <div class="accordion-content">内容2</div>
  </div>
  ...
</div>

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

.accordion-header {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

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

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

for (var i = 0; i < accordionItems.length; i++) {
  var header = accordionItems[i].querySelector('.accordion-header');
  var content = accordionItems[i].querySelector('.accordion-content');

  header.addEventListener('click', function() {
    if (content.style.display === 'none') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
}