jquery.toggle and layout issues when used in table

Question

I have a table. Each row is a record. If you click on a row (record), via jquery, I create a new TR below it, and then insert a new table (related sub-set of data pertaining to the above record) via AJAX. This is first loaded and then I expand the TR in a nice animated fashion.

It looks good.

Now that it's loaded and expanded, I want to easily toggle this TR so one can collapse them and expand them without reloading the content via AJAX.

The obvious/simplest option is to change the event handler for the trigger and give it a TOGGLE event.

Functionally, this works. Aesthetically, though, it's a completely mess.

When I first .toggle to close, the content of the new TR does collapse nicely, but the rest of the parent table doesn't follow until the TR is completely collapsed, then the parent table quickly collapses to fill the gap. This is jarring.

Then, on the next .toggle to open, the child table animates outside of the parent table, then quickly collapses its width. Also very jarring and now I'm left with a very narrow table compared to its parent.

If I omit the animation from the toggle event, it works fine, albeit without the nice transition. I'm guessing this is perhaps more CSS related the jQuery related? Any pointers as to what I might need to declare CSS-wise to keep this erratic visual behavior from happening?

EDIT: per matt's request, markup/script:

<!-- tr of parent table -->
<tr>
    <td><a href="" class="expandable-expanded">link</a></td>
    <td></td>
    <td></td>
</tr>
<!-- this is the tr I create via jQuery and then want to toggle via above link -->
<tr class="expandedContent">
    <td colspan="3">
        <div class="loadedContent" style="display: block;"><div>
        ... my nested table is here ...
        </div></div>
    </td>
</tr>

The jquery I use for the toggle:

$("td a.expandable").click(function(){
    //jquery here that does the initial creation of the TR and loading of the AJAX...

    // after loading ajax, remove the event
    $(this).unbind('click');
    // and then attach the new toggle event
    $(this).closest("tr").next("tr.expandedContent").toggle("slow");

    return false;
});

Answer 1

Try to collapse/expand nested table rather it's container.

Answer 2

Animations on table (and tr) elements (especially height) are flaky, at best. Try writing your markup using div's and whatnot and you'll have much better luck.