如何添加带有向上和向下箭头的面板折叠

<div class="panel">
  <div class="panel-header">
    <h3 class="panel-title">面板标题</h3>
    <span class="arrow"></span>
  </div>
  <div class="panel-content">
    <!-- 面板内容 -->
  </div>
</div>

.panel {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

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

.panel-title {
  margin: 0;
}

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.3s;
}

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

document.addEventListener('DOMContentLoaded', function() {
  var panelHeaders = document.querySelectorAll('.panel-header');

  panelHeaders.forEach(function(header) {
    header.addEventListener('click', function() {
      var content = this.nextElementSibling;
      var arrow = this.querySelector('.arrow');

      if (content.style.display === 'none') {
        content.style.display = 'block';
        arrow.style.transform = 'rotate(225deg)';
      } else {
        content.style.display = 'none';
        arrow.style.transform = 'rotate(45deg)';
      }
    });
  });
});