如何使用Accordion元素外部的Button切换Accordion组件？

<!-- HTML结构 -->
<button id="toggleButton">切换Accordion</button>
<div id="accordion">
  <div id="panel1">
    <h3>面板1</h3>
    <div>
      <p>面板1的内容</p>
    </div>
  </div>
  <div id="panel2">
    <h3>面板2</h3>
    <div>
      <p>面板2的内容</p>
    </div>
  </div>
</div>

<!-- JavaScript代码 -->
<script>
  // 获取按钮和Accordion组件
  var toggleButton = document.getElementById('toggleButton');
  var accordion = document.getElementById('accordion');

  // 给按钮添加点击事件监听器
  toggleButton.addEventListener('click', function() {
    // 获取面板1和面板2
    var panel1 = document.getElementById('panel1');
    var panel2 = document.getElementById('panel2');

    // 判断面板1的状态并进行切换
    if (panel1.classList.contains('active')) {
      panel1.classList.remove('active');
      panel1.style.display = 'none';
    } else {
      panel1.classList.add('active');
      panel1.style.display = 'block';
    }

    // 判断面板2的状态并进行切换
    if (panel2.classList.contains('active')) {
      panel2.classList.remove('active');
      panel2.style.display = 'none';
    } else {
      panel2.classList.add('active');
      panel2.style.display = 'block';
    }
  });
</script>