title: Collapse Table Rows with JQuery by Default
body: <p>I implemented a method found on another Stack Overflow post to allow for the expanding and collapsing of table rows using JQuery. The approach is simple and works as expected, however I am encountering the issue that the rows are expanded by default. How can I make these appear collapsed on page load so that the user can decide which ones to expand?</p>
  
  <p>As a side note, is there any way to make the collapse/expand appear more smoothly rather than just instant opened or closed?</p>
  
  <p>Thanks!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
      $( document ).ready(function()
      {
          $('.header').click(function()
          {
              $(this).nextUntil('tr.header').slideToggle(1000);
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
      &lt;tr class="header"&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="header"&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
          &lt;td&gt;TEST&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
          &lt;td&gt;meep&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>