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

[jabbamonkey]

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

 

[jabbamonkey]

Got it... just needed to remove this line...

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

 

[nicholascn]

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

To ensure that the first row of your expandable table is not expanded on page load, you'll need to remove or modify the line that expands the first row when the page loads. Specifically, the changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); line is responsible for this initial expansion.

Here’s how you can adjust your code:

1. Remove the Initial Expansion:Remove the changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); line so that no rows are expanded when the page first loads.
2. Ensure the Rows are Collapsed Initially:Optionally, you can make sure that all rows are collapsed by default on page load, though they should already be in that state without the above line.

Here’s your modified JavaScript:

$(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;
});
});

// The following line is removed to ensure no row is expanded on load
// changeTab(0, $(expchartcontents).find(".expchart-row").eq(0));
});
});

Explanation:​

• changeTab(0, $(expchartcontents).find(".expchart-row").eq(0));:
  • This line was responsible for expanding the first row when the page loaded. By removing it, you prevent any row from being expanded initially.

Now, when the page loads, all rows will remain collapsed until the user clicks on one to expand it.