PDA

View Full Version : Animated Collapsible DIV v2.4 and <tr> tags



BWJM
06-08-2011, 08:47 PM
1) Script Title:
Animated Collapsible DIV v2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
I would like to be able to collapse rows within a table. So instead of having a <div>, I want to put the id on a <tr> tag and have the <tr> tag flip between display:table-row and display:none.

The script almost works as-is, but instead of restoring the row with display:table-row, it restores it with display:block (which would be appropriate for <div> tags, but not <tr> tags).

Would it be possible to get some assistance in adapting the code to detect if the element returned by a particular ID is a <tr> or a <div> and use the appropriate display values?

Note: I do not want to collapse an entire table (otherwise I would just wrap the table in a <div> tag. I want to collapse specific rows in the table.

Note: For reference, here is a link to information on the CSS display tag.
http://www.w3schools.com/css/pr_class_display.asp

Thanks

ddadmin
06-09-2011, 07:13 AM
Well, you can try the following modified .js file, which will test whether the animated "div" in question is a TR element instead, and if so, use the value "table-row" where ever "block" would normally be used. I'm not sure if that'll produce the desired effect in itself, as to be honest I'm not too familiar with the various table and row/cell behaviors.

BWJM
06-10-2011, 04:08 AM
Thanks for the reply - I'll try that out when I get a chance to work on it again Friday and will let you know.

BWJM
06-10-2011, 03:16 PM
I appreciate the help, but it still doesn't seem to work for TR tags.

I see the changes you made and as far as I can tell that should have done it, but for some reason the display keeps getting set back to block instead of table-row.

To understand how table-row works, try the following. See also the link I provided in my initial post.

<table style="width:100%;" border="1">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr style="display:block;">
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr style="display:table-row;">
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>

Thanks again!

BWJM
06-14-2011, 06:19 PM
Can anyone help with this issue please?