Setting table body to hidden before using JavaScript to click on the table head to view the body

Question

I have multiple tables on my page taking up space so want to set a toggle on the table headers to be able to hide/show the table body when clicked. I've got this working below.

Have created tables..e.g. LicenceTable1…

table.LicenceTable1 {
  width: 100%;
  background-color: #ffffff;
  border-collapse: separate;
  border-width: 0.5px;
  border-color: #008842;
  border-style: solid;
  color: #000000;
}

table.LicenceTable1 td, table.LicenceTable1 th {
  border-width: 0.5px;
  border-color: #008842;
  border-style: solid;
  padding: 3px;
}

table.LicenceTable1 thead {
  background-color: #008842;
}

Then have some JavaScript to display/hide the body of the table when you click on the table heading JS:

$(function() {    
$(".LicenceTable1 > thead > tr").click(function() {
    $(this).closest(".LicenceTable1").find("tbody > tr").slideToggle();
});
});

But when I land on the page the body of the table is visible. Is there a quick way to make the body of the table hidden until you click on the Heading?

Answer 1

You can add a helper class and set is as default for table bodies. For example:

table tbody.hidden {
  display: none;
}

In your HTML, add this class to the bodies.

<tbody class="someclass hidden">
  ...
</tbody>

When click the table heading, just toggle the hidden class.

function toggleTableBody (header) {
  const body = header.parentNode.querySelector('tbody');
  body.classList.toggle('hidden');
}