如何通过JavaScript实现手风琴效果？

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false" aria-controls="content1">
      手风琴标题 1
    </button>
    <div id="content1" class="accordion-content" hidden>
      <p>这是手风琴内容 1。这里可以放各种信息，比如常见问题解答、产品详情等等。</p>
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false" aria-controls="content2">
      手风琴标题 2
    </button>
    <div id="content2" class="accordion-content" hidden>
      <p>这是手风琴内容 2。内容可以很长，所以我们需要平滑的展开收起效果。</p>
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false" aria-controls="content3">
      手风琴标题 3
    </button>
    <div id="content3" class="accordion-content" hidden>
      <p>这是手风琴内容 3。注意我们使用了语义化的按钮和ARIA属性来提升可访问性。</p>
    </div>
  </div>
</div>

.accordion-content {
  max-height: 0; /* 初始隐藏 */
  overflow: hidden; /* 隐藏溢出内容 */
  transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* 平滑过渡 */
  padding: 0 15px; /* 初始无内边距 */
  background-color: #f9f9f9;
}

.accordion-header {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  font-size: 16px;
  font-weight: bold;
}

.accordion-header:hover {
  background-color: #ddd;
}

.accordion-header.active {
  background-color: #ccc;
}

/* 当标题激活时，内容区域展开 */
.accordion-header.active + .accordion-content {
  max-height: 500px; /* 设置一个足够大的值，确保内容能完全展开 */
  padding: 15px; /* 展开时添加内边距 */
}

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

  accordionHeaders.forEach(header => {
    header.addEventListener('click', () => {
      // 切换当前点击标题的 'active' 类
      header.classList.toggle('active');

      // 获取对应的内容区域
      const content = header.nextElementSibling; // content就在header后面

      // 根据 'active' 状态调整内容区域的显示
      if (header.classList.contains('active')) {
        content.style.maxHeight = content.scrollHeight + 'px'; // 展开内容
        header.setAttribute('aria-expanded', 'true');
        content.removeAttribute('hidden');
      } else {
        content.style.maxHeight = '0'; // 收起内容
        header.setAttribute('aria-expanded', 'false');
        content.setAttribute('hidden', '');
      }
    });
  });
});

// 事件委托示例
document.addEventListener('DOMContentLoaded', () => {
  const accordionContainer = document.querySelector('.accordion');

  accordionContainer.addEventListener('click', (event) => {
    const header = event.target.closest('.accordion-header'); // 找到最近的.accordion-header

    if (header) { // 确保点击的是手风琴标题
      header.classList.toggle('active');
      const content = header.nextElementSibling;

      if (header.classList.contains('active')) {
        content.style.maxHeight = content.scrollHeight + 'px';
        header.setAttribute('aria-expanded', 'true');
        content.removeAttribute('hidden');
      } else {
        content.style.maxHeight = '0';
        header.setAttribute('aria-expanded', 'false');
        content.setAttribute('hidden', '');
      }
    }
  });
});