jQuery toggle table rows

Question

I'm trying to set up a table with a toggle-able rows.

|-------------------------------------|
|  Time | Icon | Name | Toggle Button |
|       |-----------------------------|
|       | Description (toggled)       |
|-------------------------------------|

<table>
    <tr>
        <td rowspan="2" class="time-block">Time</td>
        <td>Icon</td>
        <td>Name</td>
        <td><a href="#" class="toggle-button">Toggle Button</a></td>
    </tr>
    <tr class="description">
        <td colspan="3">Description</td>
    </tr>
</table>

$('.toggle-button').click(function(e){
     e.preventDefault();
     $(this).closest('tr').next('tr').toggle();
 });

This jquery does toggle the following tr, however when it does, the layout gets disorganized due to the rowspan attribute of the 'time' td cell.

My goal is to add a line to the function that changes the rowspanattribute to '1'.

Adding $(this).closest('tr td.time').attr('rowspan', '1') to the function isn't working.

Any help is greatly appreciated!

Answer 1

$('.time-block').attr('rowspan',1);