Simple menu giving invalid ID

[realwx]

I'm trying to make a simple tree menu script to contract and expand certain tables & rows. However, it's telling me that it has an invalid ID specified. Here is what I'm doing:


<img src="collapse.gif" onclick="hideshow('pop',this);" style="cursor: hand; display: ''; float: right;" />


<tbody id="pop" style="display: block;">...table rows etc etc...</tbody>



function hideshow(id, imgthis) {
if(document.getElementById(id).style.display == "block" || document.getElementById(id).style.display == "") {
document.getElementById(id).style.display = "hidden";
imgthis.src="collapse_collapsed.gif";
} else if(document.getElementById(id).style.display == "hidden") {
document.getElementById(id).style.display = "";
imgthis.src="collapse.gif";
}
}

What am I doing wrong?

[jscheuer1]

What am I doing wrong?


<tbody id="pop"

Apply the id to the entire table.

[realwx]

<tbody id="pop"

Apply the id to the entire table.

I don't think that is going to work... I have it as:


<table ...>
<tr><td>Category 1 ...insert dropdown code here...</td></tr>
<tbody id="pop">
<tr><td>one</td></tr>
<tr><td>two</td></tr>
<tr><td>three</td></tr>
</tbody>
</table>

[mburt]

No, set the id to the table:

<table id="pop" ...

[jscheuer1]

I think what you (not you mburt) are missing here is that you cannot reinvent the structure of an HTML table simply to suit your purposes. Where you have:


<table ...>
<tr><td>Category 1 ...insert dropdown code here...</td></tr>
<tbody id="pop">
<tr><td>one</t . . .

This:


<tr><td>Category 1 ...insert dropdown code here...</td></tr>

is included in the tbody even though you have placed it in the wrong spot.

You would be better off redesigning without the table or, if you must use a table, have the entire table be acted upon by code that is outside of the table. Or act upon individual td's (preferably td's that occupy an entire row).