Output problem [Archive] - CodingForums.com

florida

03-23-2005, 11:41 PM

I have a toggle that will show a record when the box is opened:

+ Project 1
then when I open it will show:
- Project 1
Mark Jones

The problem is I have several Projects (Project 1, Project 2, Project 3 etc..) that should be shown from the query and it only shows one (Project 1). Please advise how I can get this to work where it will show all my projects from the query.

So it now looks like this:

+ Project 1

and it should look like this if you can help me get it to work:

+ Project 1
+ Project 2
+ Project 3
etc..

I have all this in a Cold Fusion page and the problem seems to be the JavaScript holds it to one record. How can I get this to work. If I take out the JavaScript I can get multiple records but need to get it to work with JavaScript so I can use a toggle. Please advise
Here is the script:

<SCRIPT LANGUAGE="JavaScript">
function showDetails(theButton, theDiv)
{
if(document.getElementById(theDiv).style.visibility == 'hidden')
{
document.getElementById(theDiv).style.position="relative";
document.getElementById(theDiv).style.visibility="visible";
theButton.value = ' - ';
}
else
{
document.getElementById(theDiv).style.position="absolute";
document.getElementById(theDiv).style.visibility="hidden";theButton.value = ' + ';
}
}
</SCRIPT>
</head>
<body>

<cfquery name="get_poc" datasource="theData">
SELECT *
FROM myTable
</cfquery>
<cfoutput query = "get_poc">
<form>
<input type="button" onclick="showDetails(this, 'layer')" value=" + ">
Project #myID#
</form>
<div id="layer" style="position: absolute; visibility: hidden; top: 0px; left: 0px;">
#firstName# #LastName#
</cfoutput>

hemebond

03-24-2005, 02:30 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>55199</title>
</head>
<body>
<dl>
<cfquery name="get_poc" datasource="theData">SELECT * FROM myTable</cfquery>
<cfoutput query = "get_poc">
<dt>
Project #myID#
</dt>
<dd>
#firstName# #LastName#
</dd>
</cfoutput>
</dl>

<script type="text/javascript">
var dt = document.getElementsByTagName('dt');

for(var i = 0; i < dt.length; i++)
{
dt[i].addEventListener("click", toggle, true);
var dd = findNextSibling(dt[i], 'dd');
dd.style.display = 'none';
}

function toggle(e)
{
var dd = findNextSibling(e.currentTarget, 'dd');

if(dd)
{
dd.style.display = (dd.style.display == 'none') ? '' : 'none';
}
}

function findNextSibling(obj, tag)
{
if(obj.nodeName.toLowerCase() != tag)
{
obj = findNextSibling(obj.nextSibling, tag);
}

return obj;
}

</script>
</body>
</html>