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,

Byt alla visibility mot display, alla visible mot block, och alla hidden mot none.

En takker, det ser ut att fungera finfint. Är det så man ska göra nuförtiden alltså? :)

Både display och visibility har alltid funnits, men de gör olika saker.

Hm. Vad är det för skillnad då?

Det visar sig att display:'none'; inte gör något för mig när jag kikar i Firefox. Denna kodstump:

<span style="display:'none';">
Det här syns inte.
</span>

<span style="display:'block';">
Det här syns.
</span>

Resulterar i:

Eldräv skrev:

Det här syns inte. Det här syns.

IE skrev:

Det här syns.

Vad gäller för att det ska bli rätt i annat än IE då?

mvh

Ta bort apostroferna kring block och none så bör det fungera.

Jag får tacka, herr käkbrytare.

Nu fungerar det som det ska! :)