如何一次只打开一个手风琴？

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-button">Section 1</button>
    <div class="accordion-content">
      <p>Content for section 1...</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-button">Section 2</button>
    <div class="accordion-content">
      <p>Content for section 2...</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-button">Section 3</button>
    <div class="accordion-content">
      <p>Content for section 3...</p>
    </div>
  </div>
</div>

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

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

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.accordion-button');

  buttons.forEach(button => {
    button.addEventListener('click', function() {
      const content = this.nextElementSibling;

      if (content.classList.contains('active')) {
        content.classList.remove('active');
      } else {
        // 关闭所有其他部分
        document.querySelectorAll('.accordion-content').forEach(el => {
          el.classList.remove('active');
        });
        content.classList.add('active');
      }
    });
  });
});