js折叠

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

.accordion-content {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}

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

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

  headers.forEach(header => {
    header.addEventListener('click', function() {
      const content = this.nextElementSibling;
      content.classList.toggle('active');
    });
  });
});