如何一次只展开一个折叠式标签？

<div class="accordion">
  <div class="accordion-header">标签标题1</div>
  <div class="accordion-content">
    标签内容1
  </div>
  <div class="accordion-header">标签标题2</div>
  <div class="accordion-content">
    标签内容2
  </div>
  <div class="accordion-header">标签标题3</div>
  <div class="accordion-content">
    标签内容3
  </div>
</div>

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
}

const headers = document.querySelectorAll('.accordion-header');

headers.forEach(header => {
  header.addEventListener('click', () => {
    const content = header.nextElementSibling;
    const isActive = content.style.display === 'block';

    // 隐藏所有内容
    headers.forEach(h => {
      h.nextElementSibling.style.display = 'none';
    });

    // 如果当前内容未展开，则展开
    if (!isActive) {
      content.style.display = 'block';
    }
  });
});