第一个通过 JavaScript 或 CSS 默认打开的手风琴

我在 Shopify 产品页面中有 3 个手风琴，我打算在页面加载时默认展开第一个手风琴。页面加载后，单击其他手风琴应关闭所有以前打开的手风琴。我只想用纯 JavaScript（没有像 jQuery 这样的库）或 CSS 来做到这一点。我下面的代码只是确保第一个手风琴显示为展开的。您能在查看页面中的手风琴后帮助纠正我的代码吗https://wv3yau73hiyf9fhv-458195004.shopifypreview.com https://wv3yau73hiyf9fhv-458195004.shopifypreview.com?

 window.onload = function() {
  var accItem = document.getElementsByClassName('accordion__item');
  // Keep the first accordion open by default.
  for (i = 0; i < accItem.length; i++) {
    console.log("Within first for loop");
    accItem[0].click();
    accItem[i].addEventListener('click', toggleItem, false);
  }
  function toggleItem() {
    var itemClass = this.parentNode.className;
    for (i = 0; i < accItem.length; i++) {
      console.log("Within second for loop");
      accItem[i].className = 'accordion__item close';
    }
    if (itemClass == 'accordion__item close') {
        this.parentNode.className = 'accordion__item open';
    }
  }    
 };

使用页面上的浏览器控制台，我使用以下命令打开第一个手风琴：

let allAccordions = document.querySelectorAll(".accordion__item");
allAccordions[0].click();

是的，循环也是可能的：

for (var i = 0; i < allAccordions.length; i++) {
    if (i == 0) {
          allAccordions[i].click();
          break; // only the first, can stop looping.
    }
}