如何在页面加载时打开两个折叠按钮？

<button class="accordion">折叠按钮1</button>
<div class="panel">
  <p>折叠按钮1的内容</p>
</div>

<button class="accordion">折叠按钮2</button>
<div class="panel">
  <p>折叠按钮2的内容</p>
</div>

// 获取所有折叠按钮元素
var accordions = document.getElementsByClassName("accordion");

// 遍历折叠按钮元素，并设置默认状态为打开
for (var i = 0; i < accordions.length; i++) {
  accordions[i].classList.add("active");
  accordions[i].nextElementSibling.style.display = "block";
}

// 为折叠按钮添加点击事件
for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

/* 默认状态下的折叠按钮样式 */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

/* 打开状态下的折叠按钮样式 */
.active, .accordion:hover {
  background-color: #ccc;
}

/* 折叠内容面板样式 */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}