asked on

Javascript/CF Question for Expandable Table

Does anyone know of a script that will work with CF that will allow me to put information in an expandable table. So basically what I want to do is to display a question... Then under the question have an image or text that says click here to see the answer which will then expand the table to display the answer. It has to be able to be used mulitple times on the page because the questions and answers will be coming from a database.

Thank you

tomkinite

Wow. That's quite a deal.

Here's what I would do...

<BODY>

<TABLE>
<TR><TD>
QUESTION HERE<BR>
<IMG SRC="image.gif" onClick="document.getElementsByName('answer')[0].style.display='';" BORDER=0>
</TD></TR>
<TR><TD name="answer" id="answer" style="display:none;">THE ANSWER</TD>
</TABLE>

</BODY>

This will expand the TD with the name "answer" which contains the answer to the question. I assume you can do the query from the database already. If not, give me a shout!

jeffmace

ASKER

very good, and it did display the answer, but I guess I need to add a little more. I found this javascript that will allow me to expand and collapse the answer and it works great if I am only displaying one question at a time. But if I want to have 10 questions on one page all the answers will be expanded and you can't do anything with them. If you want to take a look and see what you can figure out that would be great. At first I though the answer was that the ID numbers in the javascript couldn't be all the same so I changed the ID number to be the ID number of my question from the database. That way they would be all different, but that didn't do the trick. Please take a look. This script is doing what I am looking for.

http://www.flooble.com/scripts/expand.php

ASKER CERTIFIED SOLUTION

tomkinite

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jeffmace

ASKER

Thank you for you help and this does work as well.

But I actually figured out how to fix the javascript from flooble. Here is the code if anyone needs it:


<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>



<div style="border: 1px none ##000000; padding: 0px; background: ##EEEEEE; ">
<table border="0" cellspacing="0" cellpadding="2" width="100%" style="background: ##C4D4F3; color: ##000000; ">
<tr>
<td><font size="2"><strong>Click Here For The Answer -----------></strong></font></td>
<td align="right">[<a title="show/hide" id="exp#ArticleID#_link" href="javascript: void(0);" onClick="toggle(this, 'exp#ArticleID#');" style="text-decoration: none; color: ##000000; ">-</a>]</td>
</tr>
</table>
<div id="exp#ArticleID#" style="padding: 3px;" align="left"><font size="2">#ArticleAnswer#</font></div>
</div>
<script language="javascript">toggle(getObject('exp#ArticleID#_link'), 'exp#ArticleID#');</script>


The exp needs to be before your ID number for it to work.

Thanks,
Jeff

anandkp

hi,

one may use the accepted answere above - but if someone tries to get it work in netscape/mac - it wont work !

so its better to use layers that have the code optimised for both versions of browsers used across the globe !

also the reason behind this is i believe the STYLE attribute !

hope this helps !

K'Rgds
Anand