Javascript show/hide functie van meerdere contents

Door Steven Hack op 23-04-2009 13:22

1.802 views

Goedendag,

Ik had een vraagje over javascript. Ik heb een webpagina met 5 contents. c1 t/m c5. Ik heb ook 5 links, die verwijzen naar elk van de contents.
Dus Link 1 linkt naar c1 etc.
Als je op link 1 klikt moet c1 dus zichtbaar worden, maar alle andere contenten die opstaan moeten dichtklappen. Nu heb ik dit stuk code geprobeerd, maar dit lukt niet.


<script type="text/javascript">
	function visible(id) {
		if (id == 'c1') {
			document.getElementById(c2).style.display = 'none';
			document.getElementById(c3).style.display = 'none';
			document.getElementById(c4).style.display = 'none';
			document.getElementById(c5).style.display = 'none';
		}
		else {
			var c = document.getElementById(id);
			if(c.style.display == 'none') {
				document.getElementById(c2).style.display = 'none';
				document.getElementById(c3).style.display = 'none';
				document.getElementById(c4).style.display = 'none';
				document.getElementById(c5).style.display = 'none';
				c.style.display = 'block';
			}
			else {
				c.style.display = 'none';
			}
		}
	}
</script>

Als ik dit stuk code doe lukt het wel, maar hiermee gaan de niet-active contents niet dicht:


<script type="text/javascript">
	function visible(id) {
		var c = document.getElementById(id);
		if(c.style.display == 'none') {
			c.style.display = 'block';
		}
		else {
			c.style.display = 'none';
		}
	}
</script>

Pieter Jansen

23-04-2009 20:37

en toen ging javascript uitgezet worden.. krijg je display:none? Of staan ze standaard zichtbaar?

Steven Hack

23-04-2009 20:49

@Barry: Dat wist ik inderdaad, vond het daarom ook al raar dat Jacco hier over Java begon, maargoed. Bedankt voor die tip, was dat even vergeten inderdaad.

@Merijn: standaard zichtbaar, en dan onload display: none;
Maar zolang ik niet weet hoe ik meerdere display's tegelijk op none kan zetten, schiet dat niet echt op.

Het lukt verder nog niet echt, ik heb op dit moment het volgende:


	<script type="text/javascript">
		function visible(id) {
			var c= new Array(4)
			c[0]=document.getElementById("c2");
			c[1]=document.getElementById("c3");
			c[2]=document.getElementById("c4");
			c[3]=document.getElementById("c5");
			var x=0;
			for (x=0; x<4; x++)
			{
				if (c[x] == id) {
					eval(c[x]).style.display = 'block';
				}
				else {
					eval(c[x]).style.display = 'none';
				}
			}
		}
	</script>

Een voorbeeld is te zien op: www.stevenhack.nl/JapanCss/test.php

Steven Hack

25-04-2009 00:53

*kleine onschuldige bump (A)*

Kan nergens vinden of dit uberhaupt mogelijk is, 4 keer achter elkaar getElementById gebruiken. Weet verder niets van javascript opzich. Iemand die me hier mee kan helpen?

Willem Jan Z

25-04-2009 01:12


function visible(id) {
    for(var i=2;i <= 5;i++) {
        if(id == i) { var display = 'block'; } else { var display = 'none'; }
        document.getElementById('c'+i).style.display = display;
    }
}

Niet getest...

Mitchell

25-04-2009 10:23

Zoveel moeite en zoveel dagen verspild voor iets wat in een paar seconden kan worden opgelost door een framework te gebruiken..

Willem Jan Z

25-04-2009 11:21

Mitchell schreef op 25.04.2009 10:23
Zoveel moeite en zoveel dagen verspild voor iets wat in een paar seconden kan worden opgelost door een framework te gebruiken..

Beetje overkill om een framework te gebruiken voor 1 ding?

Steven Hack

25-04-2009 12:08

Ben het er inderdaad met WillemJan eens dat een framework hier nogal overbodig is. En nu snap ik ook teminste weer wat meer JavaScript.

Hartelijk dank voor de edit WillemJan, het werkt perfect! Echt zeer bedankt _o_

En ook de rest bedankt voor jullie bijdrage.

Reageren

Inloggen om te reageren