How to Use slideDown (or show) function on a table row?

Question

I\'m trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes

Answer 1

I did use the ideas provided here and faced some problems. I fixed them all and have a smooth one-liner I'd like to share.

$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('
').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});

It uses css on the td element. It reduces the height to 0px. That way only the height of the content of the newly created div-wrapper inside of each td element matters.

The slideUp is on slow. If you make it even slower you might realize some glitch. A small jump at the beginning. This is because of the mentioned css setting. But without those settings the row would not decrease in height. Only its content would.

At the end the tr element gets removed.

The whole line only contains JQuery and no native Javascript.

Hope it helps.

Here is an example code:

    
            
                    
            
            
                    

                            

                                    

                                            
header_column 1
                                            
header column 2
                                    
                            
                            

                                    
row 1 left
row 1 right
                                    
row 2 left
row 2 right
                                    
row 3 left
row 3 right
                                    
row 4 left
row 4 right