如何编辑可折叠展开的JavaScript

<div class="accordion">
  <button class="accordion-btn">标题</button>
  <div class="accordion-content">
    内容
  </div>
</div>

.accordion-btn {
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-content {
  padding: 10px;
  display: none;
  background-color: #fff;
}

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}