onclick om verschillende div's te openen werkt bijna

Status
Niet open voor verdere reacties.
M

Matje88

Gebruiker
Lid geworden
26 okt 2011
Berichten
6
Hallo,

Ik probeer een div te laten verschijnen wanneer er op een afbeelding (of tekst) wordt geklikt.
De eerste lukt me, maar de tweede opent ook de eerste div, zie hieronder de code.

Ik heb het idee er bijna te zijn, maar ik weet niet zo goed wat ik verkeerd doe..

Dank vast!

Code: 
<html>
<head>

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

</head>
<body style="font-family: sans-serif; text-align: center">

<div style="display: inline-block; width: 800px; margin: 20px; background: #eeeeee;">
Click<br><br>

    <span onClick="toggleMe('one')"><img src="http://graficonnect.com/wp-content/uploads/2015/08/subicon_workflow_DigitalAssetManagement.png"></span>
    <div id="one" style="display:none; padding: 20px;">
        This will show the first div
    </div>
    
<br><br>

    <span onClick="toggleMe('two')"><img src="http://graficonnect.com/wp-content/uploads/2015/08/subicon_production_WebProductions.png"></span>
    <div id="two" style="display:none; padding: 20px;">
        This shows only the second div
    </div>

</div>

<div style="display: inline-block; width: 800px; height: 300px; background: #555555;">
</div>

</body>
</html>
 
getElementById heeft maar 1 argument, jij geeft er twee op; het tweede wordt genegeerd en in je toggleMe functie zul je dus altijd document.getElementById('one') uitvoeren

Aangezien je in je HTML wel een argument meegeeft aan toggleMe, zul je die functiedefinitie moeten aanpassen om dat argument af te vangen in een variabele. Daarna kan je getElementById met die variabele als argument aanroepen.
 
Dit zou moeten werken:
HTML: 
<html>
<head>

<script type="text/javascript">
	function toggleMe(sx) {
	document.getElementById('one').style.display = (sx == 'one') ? 'block' : 'none';
	document.getElementById('two').style.display = (sx == 'two') ? 'block' : 'none';
	}
</script>

</head>
<body style="font-family: sans-serif; text-align: center">

<div style="display: inline-block; width: 800px; margin: 20px; background: #eeeeee;">
Click<br><br>

    <span onClick="toggleMe('one')"><img src="http://graficonnect.com/wp-content/uploads/2015/08/subicon_workflow_DigitalAssetManagement.png"></span>
    <div id="one" style="display:none; padding: 20px;">
        This will show the first div
    </div>
    
<br><br>

    <span onClick="toggleMe('two')"><img src="http://graficonnect.com/wp-content/uploads/2015/08/subicon_production_WebProductions.png"></span>
    <div id="two" style="display:none; padding: 20px;">
        This shows only the second div
    </div>

</div>

<div style="display: inline-block; width: 800px; height: 300px; background: #555555;">
</div>

</body>
</html>
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan