First accordion to be made open by default either by JavaScript or CSS-CodePudding

I got 3 accordions in a Shopify store's product page out of which I need to keep the first one open by default. I want to do it only with either pure JavaScript or CSS. Below is how far I could go with the JavaScript. Could you please help correct my code after having a look at the accordions in the page here?

window.onload = function() {
  // Get only the all accordions.
  let allAccordions = document.querySelectorAll(".accordion__item input:checked ~ .accordion__item--title::after");

  allAccordions.forEach(element => {
    //Open first accordion.
    }
  });
};

CodePudding user response：

Using the browser's console on the page, I used the following to open the first accordion:

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

Yes, a loop is possible too:

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