Animated row collapse

[madk]

Hello all,

After figuring out my first problem I am not moving to another. I have a table full of data and I am looking to collapse a row when a link is clicked. I have some rough code that will hide the row but i'd like it to animate as it is collapsing.

<table>
<tr id = "row_1">
<td>1</td>
<td><a href = "">Remove Row</td>
</tr>
<tr id = "row_2">
<td>2</td>
<td><a href = "">Remove Row</td>
</tr>
<tr id = "row_3">
<td>3</td>
<td><a href = "">Remove Row</td>
</tr>
</table>

Any guidance will be appraciated. Thanks!

[ajkimoto]

Hi Madk,

How about something like this, toggling the display property of the row object to 'none'

The JS:

function hideRow(objname){
//get a reference to the table row
oHide=document.getElementById(objname)
//hide the row
oHide.style.display='none'
}

The HTML:

<table>
<tr id = "row_1">
<td>1</td>
<td><a href = "javascript:hideRow('row_1')">Remove Row</td>
</tr>
<tr id = "row_2">
<td>2</td>
<td><a href = "javascript:hideRow('row_2')">Remove Row</td>
</tr>
<tr id = "row_3">
<td>3</td>
<td><a href = "javascript:hideRow('row_3')">Remove Row</td>
</tr>
</table>

ajkimoto

[Trace]

Must you really use a table for this?

It makes it really complicated because you cannot set the height of the row less than the height of it's contents, which makes the animation really difficult.