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: 
The problem is that you are toggling the TR, not the TD within it

```
$(this).parent().parent().next()
   1      2         3       4

```

* 1 is the A
* 2 is the TD the 1 is in
* 3 is the TR that 2 is in
* 4 is the TR below 3

But your display:none is on the TD within that.

So I would recommend:

```
$("td",$(this).parent().parent().next()).toggle('slow');

```

where the inner $ will get you the containing TR, and then you use that as context for the "td" selection.
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>

```