slideToggle in table row

Question

does slideToggle work with table?

I want to slideToggle a row of a table. but it just appears without any effect.

Answer 1

SlideToggle does work with table rows, it just kind of sucks.

If you have a table row with a height larger than it's minimum - like this

<tr height="30%">

Then slidetoggle will do a smooth slide down until the reaches it's minimum height... then it will dissapear immediately like you used

$("#tr").hide();

I've made a jsfiddle demonstrating this at http://jsfiddle.net/BU28E/1/

A better solution for you may be to use a table made out of divs. Divs will slide up very smoothly. I made another jsfiddle demonstrating this at http://jsfiddle.net/BU28E/2/

Answer 2

What I do is put a single DIV in the row and set padding of the TR and TD to zero. Then I can slide-toggle the div instead of the row:

<table>
  <tr style="padding: 0">
    <td style="padding: 0">
      <div id="slideme" style="display: none">
    </td>
  </tr>
</table>

$("#slideme").slideToggle();

Works great. I think you could put a DIV in each column and slide-toggle them simultaneously if you need that.

Answer 3

I don't know if this workaround is considred and effecient way, but it worked for me :

say that you want to slideUp the first row of a table (this code will slideUp the header) :

$('table tr').first().children().slideUp();

so, basically, you would like to slide up the Row children instead of the row itself :)