I'm working with a table where any particular TR will have a link to
load a nested Table.
The jquery will
1) create the new TR + TD (with appropriate colspan)
2) add a container (DIV set to display: none)
3) load a new table via AJAX into said DIV
4) animate the DIV 'open' to show the newly loaded content
This works great.
Once loaded, though, I want subsequent clicks on the trigger to just
show or hide this TR (as opposed to grabbing the data again via ajax).
if I use .toggle() it works. The TR shows and hides itself just fine.
I wanted to add a bit of animation to it, so tried this:
.toggle("slow")
That's when things go awry.
Upon collapse, it collapses the nested table. Once that dissappears
the parent table then collapses to fill in the space. Jarring, but OK,
I guess.
Upon expand, it gets really messy...the TR appears to start expanding
to the point where it gets wider than the parent table then 'snaps'
back and is only as wide as the contents.
So, in the end, my TR is actually narrower than the rest of the TRs in
the table. Which is very very odd. At first I thought it was maybe
recalculating colspan but have confirmed the actual markup it just
fine.
In asking around it was mentioned to me that 'yea, toggle does weird
stuff with tables'. Is that true? Documented? Any known workarounds?
-DA
