Question: I have a table of content

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

```

When I click on **More** then 1st row Description will shown. it shows perfactly but colspan does not work. 

here is my js code

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

    }
$(document).ready(personalChecking);

```

Thanks in advance

Answer: 
Sorry It was my mistake. **style** tag should be place into **TR** not in **TD** 

```
  <tr style="display:none"><td colspan="3">Description goes for 1st row</td></tr>
  <tr style="display:none"><td colspan="3">Description goes for 2nd row</td></tr>

```
I had issues with jQuery and showing and hiding / sliding table rows in the past, in the end i had to get jQuery to wrap the selected td in a div and then show / hide that, not nice i know but on a tight deadline it worked.

Just something to keep in mind if you have similar issues with the animation.