Animated Collapsible DIV v2.01

[weblexie]

i have a problem in Animated Collapsible DIV v2.01

the script works but if the <div> tag put outside the <tr> and the </div> outside the </tr>

for example

<a href="javascript:animatedcollapse.toggle('test')">test</a>
<div id="test" style="width: 679px; background: #FFFFFF; display:none"><table>
<tr>
<td>Hello!</td>
</tr>
</table></div>

it doesnt work at all

please help me. all i need is to work under tables and forms.

thank you very much in advance.

[jscheuer1]

In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

That said, your example works just fine here. What you cannot do though is to break up the flow of a table with div elements, so this would not work:


<a href="javascript:animatedcollapse.toggle('test')">test</a>
<table><div id="test" style="width: 679px; background: #FFFFFF; display:none">
<tr>
<td>Hello!</td>
</tr>
</div></table>

This would not work:


<a href="javascript:animatedcollapse.toggle('test')">test</a>
<table>
<tr><div id="test" style="width: 679px; background: #FFFFFF; display:none">
<td>Hello!</td></div>
</tr>
</table>

This would:


<a href="javascript:animatedcollapse.toggle('test')">test</a>
<table>
<tr>
<td><div id="test" style="width: 679px; background: #FFFFFF; display:none">Hello!</div></td>
</tr>
</table>

You could even nest a full table inside the div if you need columns and/or rows.

[weblexie]

sir, how could i nest a full table inside the div if you need columns and/or rows?

if i need to toggle a form inside a table?

thanks a lot.

[jscheuer1]

Since I have no idea what kind of form you want, this is only a very basic example, but I hope you get the idea:


<a href="javascript:animatedcollapse.toggle('test')">test</a>
<table>
<tr>
<td><div id="test" style="width: 679px; background: #FFFFFF; display:none">

<form action="#">
<table>
<tr>
<td><input type="text" name=""></td><td><input type="text" name=""></td>
</tr>
<tr>
<td><input type="text" name=""></td><td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Go!"></td>
</tr>
</table>
</form>

</div></td>
</tr>
</table>