js中的手风琴效果

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

.accordion-content {
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  max-height: 0;
}

.accordion-content.active {
  display: block;
  max-height: 500px; /* Adjust as needed */
  transition: max-height 0.2s ease-in;
}

document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', () => {
    const content = header.nextElementSibling;
    content.classList.toggle('active');
  });
});