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

JavaScript
1

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

2

The main culprit is this line. Comment it out and it won’t expand the first row.

$(expchartcontents).find(".expchart-row").eq(0));

Note: to see this work on your codepen, you also need to remove the style=“display:block” from this line, but I suspect this is a copy/paste artifact from your site to codepen

<div class="expchartpane-subitem" style="display: block;">
3

Awesome. So simple. Kicking myself for troubleshooting for so long. Thanks!
(and good spot with the artifact)

1 Like