Javascript Expandable Rows … First row expanded … need it closed on page load

I have an expandable table that I modified… Right now it functions very well, but the FIRST ROW is expanded on page load. And I need that first row to be closed. Javascript is below.

$(document).ready(function () {
  const expchartcontents = $('.expchart');

  expchartcontents.each((index, expchartcontents) => {
  let selecteditem = 0;

  let expchartItemIndex = -1;
  const changeTab = (index, item) => {
      var delay = 300;
      if (window.innerWidth < 980) {
        delay = 800;
      }
      if (expchartItemIndex !== index) {
            $(expchartcontents).find(".expchart-row")
                .eq(expchartItemIndex)
                .children(".expchartpane-subitem")
                .slideUp(delay);
            $(expchartcontents).find(".expchart-row")
                .eq(expchartItemIndex)
                .removeClass("clicked");
          
            $(expchartcontents).find(item)
                .children(".expchartpane-subitem")
                .slideDown(delay);
            $(expchartcontents).find(item)
                .addClass("clicked");
            expchartItemIndex = index;

      } else {
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .children(".expchartpane-subitem")
            .slideUp(delay);
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .removeClass("clicked");
          expchartItemIndex = -1;
      }
};
/* Click closes others */
$(expchartcontents).find(".expchart-row").each((index, item) => {
      $(expchartcontents).find(item).click(() => {
            changeTab(index, item);
            selecteditem = index;
      });
});
changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); 
  });
});

I don’t know javascript very well, so I’ve been trying various things. If I change the last line … it changes some of the opening states, but the 1st is still open.

changeTab(-1, $(expchartcontents).find(".expchart-row").eq(-1)); 
/^ does nothing (first row still expanded)  */
changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); 
/^ does nothing (first row still expanded) */
changeTab(1, $(expchartcontents).find(".expchart-row").eq(1));
/^ opens 2nd row, in addition to the 1st */ 
changeTab(2, $(expchartcontents).find(".expchart-row").eq(2)); 
/^ opens 3rd row, in addition to the 1st */ 

I’ve also tried changing the initial variables, hoping they’d change, but that didn’t help either…

let selecteditem = 0; /* tried -1, 1, 2, 3 ... no change */
let expchartItemIndex = -1; /* tried 0, 1, 2, 3 ... no change */

Here is a codepen for easier viewing…

https://codepen.io/jabbamonkey/pen/QWXqWVM