title: Remove Padding with SlideToogle
body: <p>I have some code that expands the rows. The table has padding for each td. Which is fine but the table when collapsed still shows this padding,</p>
  
  <p><a href="http://jsfiddle.net/0Lh5ozyb/55/">http://jsfiddle.net/0Lh5ozyb/55/</a></p>
  
  <p>Below is the <strong>jquery</strong></p>
  
  <pre><code>$('tr.parent')
      .css("cursor", "pointer")
      .click(function () {
  
  
          var $children = $(this).nextUntil( $('tr').not('[class^=child-]') );
          $children.find('td &gt; div').slideToggle();
  });
  
  $('tr[class^=child-]').find('td &gt; div').hide();
  </code></pre>
  
  <p>Below is the <strong>HTML</strong></p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;tr class="parent" id="row1"&gt;
          &lt;td&gt;&lt;div&gt;People&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Click to Expand&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;N/A&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row1-1"&gt;
          &lt;td&gt;&lt;div&gt;Eve&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Jackson&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;94&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row1-2"&gt;
          &lt;td&gt;&lt;div&gt;John&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Doe&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;80&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="parent" id="row2"&gt;
          &lt;td&gt;&lt;div&gt;People&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Click to Expand&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;N/A&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row2-1"&gt;
          &lt;td&gt;&lt;div&gt;Eve&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Jackson&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;94&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row2-1"&gt;
          &lt;td&gt;&lt;div&gt;John&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Doe&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;80&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="parent" id="row3"&gt;
          &lt;td&gt;&lt;div&gt;People&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Click to Expand&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;N/A&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row3-1"&gt;
          &lt;td&gt;&lt;div&gt;Eve&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Jackson&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;94&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child-row3-2"&gt;
          &lt;td&gt;&lt;div&gt;John&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Doe&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;80&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What is the best way to ensure that the padding is removed when the rows are collapsed.</p>