使用标题加载子部分

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header" onclick="toggleAccordion('section1')">Section 1</button>
    <div id="section1" class="accordion-content">
      Content for section 1 goes here.
    </div>
  </div>
</div>

function toggleAccordion(id) {
  var element = document.getElementById(id);
  element.classList.toggle("active");
  element.style.maxHeight = element.scrollHeight + "px";
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content.active {
  max-height: 500px; /* 根据内容调整 */
}

@media (max-width: 600px) {
  .accordion-header {
    font-size: 16px;
  }
  .accordion-content {
    font-size: 14px;
  }
}