js左右折叠

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Example</title>
<style>
  .accordion {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .accordion-header {
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
  }
  .accordion-content {
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
</style>
</head>
<body>

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

<script>
  document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
      const content = header.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + 'px';
      }
    });
  });
</script>

</body>
</html>

.accordion-content {
  will-change: max-height;
}