jQuery - hiding/collapsing a row Asked Sep 27 '11 at 03:56 Active Oct 03 '14 at 12:22 Viewed 1.6k times 6 0 I want table rows to disappear (by animating their height to 0px and opacity to 0). I'm using the following $('#somecellelement').closest('tr').children('td').css('overflow','hidden'); $('#somecellelement').closest('tr').children('td').animate({ height: '0px', opacity: 0 },500); Where #somecellelement is something contained in cells of rows I want hidden. Opacity is animating correctly but the table row doesn't get smaller. If I set height: 500px then it works, but I need the row to disappear. I cannot remove the element from DOM, though, due to scripts expecting values from form elements in those rows. jquery css edited Dec 12 '13 at 13:19 Jawa 2,336 6 34 39 asked Sep 27 '11 at 03:56 A-OK 3,184 10 34 42 Is there a reason not stated that you are animating the td element instead of #somecellelement directly? The problem you're having is tr and td aren't set to display type of block which causes an issue with trying to set their height to 0. – Doozer Blake Sep 27 '11 at 04:17 #somecellelement is not supposed to be animated. it's just an whose parent row needs to be hidden. – A-OK Sep 27 '11 at 04:21 1 Well, you're going to have issues achieving a height animation on a tr or td is why I asked, they just don't appear to work. The 2 solutions posted below are I assume not doing what you're looking for specifically. I'm reading it that you want it to animate the height up until the row disappears. – Doozer Blake Sep 27 '11 at 04:24 Yes, exactly. And I need to use because it's actual tabular data. Oh well if it can't be done, display:none will have to do – A-OK Sep 27 '11 at 04:27

Answer 1

If you can apply a <div> within each <td> element, then you can animate them properly. jQuery does not apply height animations to <tr> and <td>. The height animations only work on elements with display: block set, I believe.

A small change:

$('#somecellelement').closest('tr').children('td').children('div').animate(
    {height: '0px',
     opacity: 0}, 500);  

Full sample here: http://jsfiddle.net/PvwfK/

Answer 2

As Doozer Blake's answer says, you cannot apply jQuery animations to <td> and <tr> elements. I also don't like the idea of adding a <div> element to every cell in the table in advance, because in large tables it can hurt performance.

However, you can use jQuery's wrapInner function to dynamically wrap the contents of the <td>, only when you need to animate the row:

$('#somecellelement')
    .closest('tr')
    .children('td')
    .wrapInner('<div class="td-slider" />')
    .children(".td-slider")
    .slideUp();

A word about padding

If your <td> elements have padding, they also need to be animated for a complete collapsing effect. This can be done easily with CSS3 transitions:

$('#somecellelement').closest('tr').addClass('collapsed');

And the CSS:

td {padding:10px; transition:padding 1s;}
.collapsed > td {padding:0;}

Answer 3

you are animating the children, animate the <tr>

$('#somecellelement').closest('tr').animate({
    height: '0px',
    opacity: 0
},500);