在vanilla JS中定位特定行以使折叠式箭头旋转

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header" id="header1">
      <h2 class="accordion-title">
        <button class="accordion-toggle" type="button" data-target="#content1" aria-expanded="false">
          Item 1
          <span class="arrow"></span>
        </button>
      </h2>
    </div>
    <div class="accordion-content" id="content1" aria-labelledby="header1">
      Content 1
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header" id="header2">
      <h2 class="accordion-title">
        <button class="accordion-toggle" type="button" data-target="#content2" aria-expanded="false">
          Item 2
          <span class="arrow"></span>
        </button>
      </h2>
    </div>
    <div class="accordion-content" id="content2" aria-labelledby="header2">
      Content 2
    </div>
  </div>
</div>

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000 transparent transparent transparent;
  transition: transform 0.3s ease;
}

.arrow.down {
  transform: rotate(180deg);
}

document.addEventListener('DOMContentLoaded', function() {
  var toggles = document.querySelectorAll('.accordion-toggle');

  toggles.forEach(function(toggle) {
    toggle.addEventListener('click', function() {
      var arrow = this.querySelector('.arrow');

      if (arrow.classList.contains('down')) {
        arrow.classList.remove('down');
      } else {
        arrow.classList.add('down');
      }
    });
  });
});