JavaScript expanding menu (CF, too)

Hello, all.

I’ve done expanding menus, before, and had no problem IF everything is hard-coded (I already know the id of what to expand, it’s in there.)

But now I’m trying to do it with a database driven menu, and can’t seem to get it to work. I’ve tried using “display:none” and “display:block”, “visibility:hidden” and “visibility:visible”, and even tried using “height:0px” and “height:20px”, all to no avail.

The primary language is ColdFusion; I’m manipulating some of the javascript with CF, as well.

Here is the link to what I’m currently working on, plus the code involved.
[url]http://www.goldininstitute.org/staging_dynamic/index.cfml?n=3&sn=5[/url]

[code]
// Here’s the JavaScript
function changeContent(tid) {
<cfloop query=”queryData”>
<cfif queryData.itemParent gt 0><cfset thisIteration = thisIteration + 1> if (#queryData.itemParent# == tid) { thisItemID++; }
document.getElementById(“childOf#val(queryData.itemParent)#_#thisIteration#”).style.height = “0px”;
</cfif>
</cfloop>
for (i=0;i<thisItemID;i++) {
document.getElementById(“childOf”+tid+”_”+(i+1)).style.height = “20px”;
}

}
[/code]
[code]
<!— Here’s the HTML & CF —>
<table width=”180″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ hspace=”0″ vspace=”0″>
<tr>
<td class=”menuHeader”>#trim(thisTitle)# Menu</td>
</tr><cfset counter = 0>
<cfloop query=”queryData”><cfset thsID = val(queryData.itemParent)><cfif val(thsID) gt 0><cfset counter = counter + 1></cfif>
<div<cfif val(thsID) gt 0> style=”display:none; position:absolute; height:0px;” id=”childOf#val(queryData.itemParent)#_#counter#” name=”childOf#val(queryData.itemParent)#_#counter#”<cfelse> style=”display:block; position:absolute; height:20px;” id=”#val(queryData.itemParent)#_#counter#” name=”#val(queryData.itemParent)#_#counter#”</cfif>>
<tr>
<td class=”menu”><cfif val(thsID) gt 0>&nbsp;&nbsp;&nbsp;</cfif><a href=”javascript:void(0);” id=”#val(queryData.itemID)#” name=”#val(queryData.itemID)#” style=”border:0px solid ##999999;” onClick=”changeContent(this.id);” onFocus=”this.blur();”>#trim(queryData.itemTitle)#</a></td>
</tr></div>
</cfloop>
</table>
[/code]

One of the problems I am having is that when I hard-code a div’s height to 0px (or visibility:hidden, or display:none), it’s ignored and the height is there (or visible, or displayed), anyway.

Any ideas?

Thanks,

^{^_^}

Also in #JavaScript _↴