Collapse HTML table rows by default

Question

I'm using slight modification from this answer to make header rows collapsible in an HTML table.

I want to modify the JS snippet so that rows are collapsed rather than expanded by default (on page load/document ready). How can I do this?

Basically what I'm trying to achieve is for:

$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){

to be run once at page load/refresh, in addition to when header rows are clicked and toggled.

I know that I'll need to change the two tags two <span>+</span> in HTML, but am stuck on how to trigger this behavior on page load.

$(document).ready(function() {
  $('tr.header').click(function() {
    $(this).find('span').text(function(_, value) {
      return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function() {});
  });
});

table, tr, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}

tr.header {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table border="0">
  <tr class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

Answer 1

I just update your code with few JS changes, I hope it'll help you out. Thanks

Add below JS code before your click method

$('tr.header').nextUntil('tr.header').slideToggle(100);

$(document).ready(function(){
    $('tr.header').nextUntil('tr.header').slideToggle(100);
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header {
    cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

Another way you can achieve this functionality by using CSS

$(document).ready(function(){
    $('tr.header').click(function(){
        $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
        $(this).nextUntil('tr.header').slideToggle(100, function(){
        });
    });
});

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid #000;
  display: none;
}

td + td {
  border-left: 1px solid #000;
}

tr + tr {
  border-top: 0;
}

tr.header {
  cursor: pointer;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
  <tr  class="header">
      <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header">
    <th colspan="2">Header <span>-</span></th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>