Remove Padding with SlideToogle

Question

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,

http://jsfiddle.net/0Lh5ozyb/55/

Below is the jquery

$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {


        var $children = $(this).nextUntil( $('tr').not('[class^=child-]') );
        $children.find('td > div').slideToggle();
});

$('tr[class^=child-]').find('td > div').hide();

Below is the HTML

<table class="table">
    <tr class="parent" id="row1">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row1-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row1-2">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent" id="row2">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row2-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row2-1">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent" id="row3">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row3-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row3-2">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
</table>

What is the best way to ensure that the padding is removed when the rows are collapsed.

Answer 1

Well, i'm sure you've figured out that the problem is the padding that bootstrap is appliyng to the <td>.

On the other hand, if you toggle the slide on the <td>, it gets weird because it does not hide the div's overflow.

An easy fix for that is to toggle both (td and div), simultaneously:

$children.find('td > div, td').slideToggle();

Updated JsFiddle