How do I collapse all on load with a nested JavaScript accordion

Question

I have created a nested accordion with JavaScript. on load the two parent accordions are closed but the nested accordions are all open with the arrow pointing the wrong way. How do i make it so all nested accordions are also closed?

here is the code: https://jsfiddle.net/mike4323/spfqf1t5/

This is the accordion code

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

Answer 1

in your html, the <div> siblings of the nested accordion <button> do not have the class panel

The css for class panel has display: none;

basically, add the class panel to the <div> siblings of the nested accordion <button> or give those div sa display: none; by default.