Ik heb 2 onClick events, die samen niet werken. Echter, als ik 1 van de 2 uitvink, werkt de overgebleven wel. Ik heb onderstaande code:
function ShowDiv(id)
{
//aantal bedrijven ophalen (aantal div's die binnen een div staan met id 'Bedrijven')
var aantalbedrijven = document.getElementById('Bedrijven').childNodes;
//for lus starten
//i met 1 ophogen wanneer het aantal bedrijven kleiner of gelijk is aan i
for( var i=1; i<= aantalbedrijven.length; i++ )
{
//als id en i gelijk zijn
if( id == i )
{
//de style van id i op block zetten
document.getElementById(i).style.display = 'block';
}
//als ze ongelijk zijn aan elkaar (i en id)
else
{
//de style van id i op none zetten
document.getElementById(i).style.display = 'none';
}
}
}
function ShowLogos(id)
{
//aantal bedrijven ophalen (aantal div's die binnen een div staan met id 'Bedrijven')
var aantallogos = document.getElementById('Logos').childNodes;
//for lus starten
//i met 1 ophogen wanneer het aantal bedrijven kleiner of gelijk is aan i
for( var i=1; i<= aantallogos.length; i++ )
{
//als id en i gelijk zijn
if( id == i )
{
//de style van id i op block zetten
document.getElementById(i).style.display = 'block';
}
//als ze ongelijk zijn aan elkaar (i en id)
else
{
//de style van id i op none zetten
document.getElementById(i).style.display = 'none';
}
}
}
<ul>
<li><a onclick="ShowDiv('Bedrijf1');ShowLogos('Bedrijf1')">Bedrijf 1</a></li>
<li><a onclick="ShowDiv('Bedrijf2');ShowLogos('Bedrijf2')">Bedrijf 2</a></li>
<li><a onclick="ShowDiv('Bedrijf3');ShowLogos('Bedrijf3')">Bedrijf 3</a></li>
<li><a onclick="ShowDiv('Bedrijf4');ShowLogos('Bedrijf4)">Bedrijf 4</a></li>
</ul>
<div id="Bedrijven">
<div id="Bedrijf1" style="display: none;">Info Bedrijf 1</div>
<div id="Bedrijf2" style="display: none;">Info Bedrijf 2</div>
<div id="Bedrijf3" style="display: none;">Info Bedrijf 3</div>
<div id="Bedrijf4" style="display: none;">Info Bedrijf 4</div>
</div>
<div id="Logos">
<div id="Bedrijf1" style="display: none;">Logo 1</div>
<div id="Bedrijf2" style="display: none;">Logo 2</div>
<div id="Bedrijf3" style="display: none;">Logo 3</div>
<div id="Bedrijf4" style="display: none;">Logo 4</div>
</div>
Iemand een idee om het zodanig te combineren dat ze samen tegelijk werken?