jQuery slideToggle on a table with thead and tbody elements. No animation.

Question

I have a table with a thead and tbody sections. I have applied a slideToggle on this successfully, but the animation is broken.

When a user clicks on the thead, I wa

Answer 1

It disappears because normally will get no shorter than the tallest td, no matter what you set its height to with CSS.

This is why the natural-height tbody just seems to disappear, while the one with artificial extra-height appears to run until the tr reached its natural height.

You can kludge around this with tbody {display:block;}. See the kludge at jsFiddle.

But, notice the effect that has when a table height is set.

Probably, the best way is to wrap the whole table in a div and slideToggle that, like so:

    
TABLE HEADING


    

      

        

            
Cell Contents
            
Cell Contents
            
Cell Contents
        
      
    

Just be sure and fix the table widths the same.

See it in action at jsFiddle.