如何为一个手风琴进行多个切换？

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

.accordion {
  width: 100%;
  border: 1px solid #ccc;
}

.panel {
  border-top: 1px solid #ccc;
}

.panel-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

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

// 获取所有面板标题和内容
var headers = document.querySelectorAll('.panel-header');
var contents = document.querySelectorAll('.panel-content');

// 监听面板标题的点击事件
headers.forEach(function(header, index) {
  header.addEventListener('click', function() {
    // 隐藏所有内容
    contents.forEach(function(content) {
      content.style.display = 'none';
    });
    // 显示点击的内容
    contents[index].style.display = 'block';
  });
});