title: Collapse HTML table rows by default
body: <p>I'm using slight modification from <a href="https://stackoverflow.com/a/16926867/7954504">this</a> answer to make header rows collapsible in an HTML table.</p>
  
  <p><strong>I want to modify the JS snippet so that rows are collapsed rather than expanded by default (on page load/document ready).</strong> How can I do this?</p>
  
  <p>Basically what I'm trying to achieve is for:</p>
  
  <pre><code>$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
  $(this).nextUntil('tr.header').slideToggle(100, function(){
  </code></pre>
  
  <p>to be run once at page load/refresh, in addition to when header rows are clicked and toggled.</p>
  
  <p>I know that I'll need to change the two tags two <code>&lt;span&gt;+&lt;/span&gt;</code> in HTML, but am stuck on how to trigger this behavior on page load.</p>
  
  <hr>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function(){
      $('tr.header').click(function(){
          $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
          $(this).nextUntil('tr.header').slideToggle(100, function(){
          });
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table border="0"&gt;
    &lt;tr  class="header"&gt;
        &lt;th colspan="2"&gt;Header &lt;span&gt;-&lt;/span&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr  class="header"&gt;
      &lt;th colspan="2"&gt;Header &lt;span&gt;-&lt;/span&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;date&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;data&lt;/td&gt;
      &lt;td&gt;data&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table, tr, td, th
  {
      border: 1px solid black;
      border-collapse:collapse;
  }
  tr.header
  {
      cursor:pointer;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/mkb39x0u/" rel="nofollow noreferrer">https://jsfiddle.net/mkb39x0u/</a></p>