title: How to initially collapse expandable table rows
body: <p>I have an expanding table row which is working however there are 2 things im not sure of</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;table&gt;
    &lt;tr class="parent" id="row123"&gt;
      &lt;td&gt;People&lt;/td&gt;
      &lt;td&gt;Click to Expand&lt;/td&gt;        
      &lt;td&gt;N/A&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="child-row123"&gt;
      &lt;td&gt;Eve&lt;/td&gt;
      &lt;td&gt;Jackson&lt;/td&gt;        
      &lt;td&gt;94&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="child-row123"&gt;
      &lt;td&gt;John&lt;/td&gt;
      &lt;td&gt;Doe&lt;/td&gt;        
      &lt;td&gt;80&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;script&gt;
  $(function() {
      $('tr.parent')
          .css("cursor","pointer")
          .click(function(){
              $(this).siblings('.child-'+this.id).toggle();
          });
      $('tr[@class^=child-]').hide().children('td');
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <ul>
  <li>How do you ensure you collapse the rows at the beginning </li>
  <li>How do you
  perform a slideToggle effect when I have tried using this I get some
  odd results.</li>
  </ul>
  
  <p>Thanks,</p>