Lagerproblem, eller?

Nu har jag satt mig på bävern igen, denna gång med något som jag borde kunna lösa, men som jag inte riktigt får ihop. Jag har utgått lite ifrån kod jag skrivit för ett par, tre år sedan (som fungerar), men nu i den nya implementationen och grova förenklingen får jag det inte att fungera.

Jag har en lista på tio kategorier. Två huvudkategorier, och åtta underkategorier. Underkategorierna ska inte synas förrän man klickar för att expandera huvudkategorin. Det fungerar. Dock tas liksom platsen för underkategorierna i besittning även om underkategorin är stängd. Detta vill jag inte. Min kod (ytterligare förenklad för tydlighetens skull):

<script>
function expand(id) {
	var obj = document.getElementById('f'+id);
	if (obj.style.visibility=='visible')
		obj.style.visibility='hidden';
	else
		obj.style.visibility='visible';
}
</script>

<table>
	<tr>
		<td id="f0" style="position:relative;">
			<a href="#" onclick="expand(1);">Huvudkategori 1</a><br/>
		</td>
	</tr>
	<tr>
		<td id="f1" style="position:relative;visibility:'hidden';">
			<a href="#" onclick="expand(3);">Underkategori 1</a><br/>
			<a href="#" onclick="expand(4);">Underkategori 2</a><br/>
			<a href="#" onclick="expand(11);">Underkategori 3</a><br/>
			<a href="#" onclick="expand(12);">Underkategori 4</a><br/>
			<a href="#" onclick="expand(10);">Underkategori 5</a><br/>
		</td>
	</tr>
	<tr>
		<td style="position:relative;">
			<a href="#" onclick="expand(2);">Huvudkategori 2</a><br/>
		</td>
	</tr>
	<tr>
		<td id="f2" style="position:relative;visibility:'hidden';">
			<a href="#" onclick="expand(9);">Underkategori 1</a><br/>
		</td>
	</tr>
</table>

Testa: http://member.webforum.nu/%40nders/wf.htm

Någon som kan få mig på rätt bana i underkategorigömmandet?

Mvh och tpf,