如何让原生JavaScript手风琴默认展开第一个面板？

我正在制作一份报告，尝试让原生JavaScript实现的手风琴默认展开第一个面板，但始终无法成功。我找到的相关示例均基于jQuery，代码结构与当前实现有所不同。以下是我的具体代码，恳请各位提供帮助：

HTML代码 #

<FONT size=2> 
<P><SpotfireControl id="aaa37ff537bc4cf1977755f7b80e0a40" /></P>
<div id='myAccordion1'>
<b>Controls</b>
<DIV>
<P><U>Date Slider</U></P>
<P><SpotfireControl id="b66eca7e1cff4295bf614b37f089546b" /></P>
<P><U>Total / Daily Avg</U></P>
<P><SpotfireControl id="882e441cd33847129f5179fe544a7d8e" /></P>
<P><U>Gross / Net</U></P>
<P><SpotfireControl id="788a04c90b30490ebca9ef58b2c13da9" /></P>
<P><U>Deferred <EM>BOE</EM> / <EM>Oil</EM> / <EM>Gas</EM> / <EM>NGL</EM></U></P>
<P><SpotfireControl id="b4d4c03dcd924eacb02614e5954aa93c" /></P>
<P><FONT color=#239e58><U>Hide Deferred for DT Types</U></FONT></P>
<P><FONT color=#239e58><SpotfireControl id="a0feb88eaa184527a3df20956c9e2291" /></FONT></P>
<P><U>Report Data Up Through</U></P>
<P><SpotfireControl id="cea1851e80024190a7539d6e7bb5f33b" /></P>
</div>
<b>Filters (Main)</b>
<DIV>
<P><U>Date</U></P>
<P><SpotfireControl id="c0b5976e75c841208ff40023cbfadd5e" /></P>
<P><U>Formation</U></P>
<P><SpotfireControl id="dfcf0dd748214ce39178edb65d687690" /></P>
<P><U>Well</U></P>
<P><SpotfireControl id="b8b08ecd1e9a42cfaaf4e1bda015f3a6" /></P>
<P><U>Pad</U></P>
<P><SpotfireControl id="9419ac81214d40769813b93d54aeec9a" /></P>
<P><U>Route</U></P>
<P><SpotfireControl id="7be74d9d54674b6ea6b248e15e627881" /></P>
</DIV>
<b>Filters (Downtime)</b>
<DIV>
<P><U>Primary DT Reason</U></P>
<P><SpotfireControl id="bdb60a369a8a4c8e94ac647f3c72807c" /></P>
<P><U>Secondary DT Reason</U></P>
<P><SpotfireControl id="267f49d05e9b47c7909b203d76714e69" /></P>
</DIV>
</DIV>
</FONT>

CSS代码 #

//accordion look and feel
css=`<style>
dt.accordion__heading {
  font-size: .75rem;
  font-weight: normal;
  line-height: 1;
  margin: 0; 
  padding: 0;
}
.accordion__item{
  margin:0 !important;
}
.container {
  max-width: ${w};
  Xmargin: 0 auto;
  background: transparent;
}
.accordion {
  width: 100%;
  background: #fff;
  border:  1px solid RGB(45,132,219);
  text-align: left;
}
.accordion__trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: inherit;
  /*   text-transform: uppercase; */
  letter-spacing: 2px;
  padding: 1rem 1.5rem;
  background: RGB(62,142,222); 
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
  border: 0 none;
  border-bottom: 1px solid RGB(45,132,219);
  width: 100%;
  text-align: left;
  margin: 0;
  position: relative;
}
.accordion__trigger::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff; /*arrow*/
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.5s;
}
.accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}
.accordion__trigger:hover,
.accordion__trigger:focus {
  background:  RGB(35,122,210);
}
.accordion__panel {
  overflow: hidden;
  padding: 0 1.5rem 0 1.5rem;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 500;
  max-height: 0;
  border-right:1px solid  RGB(35,122,210);
  border-left:1px solid  RGB(35,122,210);
  visibility: hidden;
  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
}
.accordion__panel--open {
  visibility: visible;
  border-bottom:1px solid  RGB(35,122,210);

}
</style>`

JavaScript代码 #

(function () {

//script parameters
const id="myAccordion1"
const w="500px"
const multiselect = true;


var el = document.getElementById(id);
el.className='container'
//var tmp = [...el.cloneNode(true).children];
//el.innerHTML=""
tmp = [...el.children]

tmp.forEach((e,i) => {
  let p = document.createElement('p');
  p.className="accordion_item"
  if(i%2==0){//titles
     dt = document.createElement('dt')
     dt.className="accordion__heading"
     btn = document.createElement("button")
     btn.className="accordion__trigger"
     btn.appendChild(e)
     dt.appendChild(btn)
     el.appendChild(dt)
  }else{//contents
     e.className="accordion__panel"
     p.appendChild(e)
     el.appendChild(e)
  }
})


//accordion stuff
  const headings = el.querySelectorAll(".accordion__heading");
  const triggers = [];
  const accordionContents = document.querySelectorAll(".accordion__panel");
  const copyOpenClass = "accordion__panel--open";

  headings.forEach((h, i) => {
    let btn = h.querySelector("button");
    triggers.push(btn);
    let target = h.nextElementSibling;
    btn.onclick = () => {
      let expanded = btn.getAttribute("aria-expanded") === "true";
      if (expanded) {
        closeItem(target, btn);
      } else {
        openItem(target, btn);
      }
    };
  });
  function closeAllExpandedItems() {
    const expandedTriggers = triggers.filter(
      (t) => t.getAttribute("aria-expanded") === "true"
    );
    const expandedCopy = Array.from(accordionContents).filter((c) =>
      c.classList.value.includes(copyOpenClass)
    );
    expandedTriggers.forEach((trigger) => {
      trigger.setAttribute("aria-expanded", false);
    });
    expandedCopy.forEach((copy) => {
      copy.classList.remove(copyOpenClass);
      copy.style.maxHeight = 0;
      copy.style.padding = "0 1.5rem 0 1.5rem";
    });
  }
  function closeItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    } else {
      btn.setAttribute("aria-expanded", false);
      target.classList.remove(copyOpenClass);
      target.style.maxHeight = 0;
      target.style.padding = "0 1.5rem 0 1.5rem";
    }
  }
  function openItem(target, btn) {
    if (!multiselect) {
      closeAllExpandedItems();
    }
    btn.setAttribute("aria-expanded", true);
    target.classList.add(copyOpenClass);
    target.style.maxHeight = target.scrollHeight + "px";
    target.style.padding = "1rem 1.5rem 2rem 1.5rem";
  }
  //setTimeout(() => triggers[0].click(), 750);
})();

内容的提问来源于stack exchange，提问作者Infotech