td colspan does not work while using jquery show/hide()
<p>I have a table of content</p>

<pre><code>&lt;table&gt;
&lt;thead&gt;
  &lt;tr&gt;
 &lt;th&gt;First Name &lt;/th&gt;
 &lt;th&gt;Last Name &lt;/th&gt;
 &lt;th&gt;Description&lt;/th&gt;
  &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
  &lt;tr class="odd"&gt;
 &lt;td&gt;John&lt;/td&gt;
 &lt;td&gt;Deo&lt;/td&gt;
 &lt;td&gt;&lt;a class="personal-checking-more-link"&gt;More&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;&lt;td style="display:none" colspan="3"&gt;Description goes for 1st row&lt;/td&gt;&lt;/tr&gt;
  &lt;tr class="odd"&gt;
 &lt;td&gt;Jaden&lt;/td&gt;
 &lt;td&gt;Aidan&lt;/td&gt;
 &lt;td&gt;&lt;a class="personal-checking-more-link"&gt;More&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;&lt;td style="display:none" colspan="3"&gt;Description goes for 2nd row&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
</code></pre>

<p>
When I click on <b>More</b> then 1st row Description will shown. it shows perfactly but colspan does not work. </p>

<p>here is my js code</p>

<pre><code>personalChecking = function () {
  $('a.personal-checking-more-link').click(function() {
   $(this).parent().parent().next().toggle('slow');
  });

 }
$(document).ready(personalChecking);
</code></pre>

<p>Thanks in advance</p>
