Hoi lonnekem82,
Hier is dan het beloofde javascript toggle-principe:
[JS]<script type="text/javascript">
function toggle(n){
/* = verzamel eerst alle directe kinderen = alle hoofd-div's binnen de div id="textColumn" */
var allTxt = document.getElementById('textColumn').children;
/* nu alle kinderen langsgaan */
for (var i=1; i<=allTxt.length; i++){
var block = document.getElementById('txt-'+i);
if ( i == n ){ /* als uitgekozen tekst */
block.style.display='block'; /* dan laten zien */
}
else { /* en anders */
block.style.display='none'; /* tekstblok verbergen */
}
}
}
</script>[/JS]
Je kunt hier zo veel tekstblokken in zetten als je zelf wilt. Als ze maar een id in de vorm van
<div id="txt-1">,
<div id="txt-2"> enz. hebben.
Het script *) telt zelf hoeveel kandidaten er zijn, en zet ze allemaal aan de kant behalve de nieuwe uitverkorene. :love:
In werking ziet dat er zo uit:
Dat zijn zo'n 10 regeltjes: daar hoef je geen
jQuery bibliotheek van 8374 regels voor binnen te halen!
PS: er moeten nog wel wat maatregelen getroffen worden voor de toegankelijkheid voor als men javascript en/of css uit heeft staan; maar dat geldt ook bij gebruik van jQuery.
Met vriendelijke groet,
CSShunter
___________
*) Eigenlijk is het niet helemaal een echt toggle-script, maar een afgeleide vorm. Een echte toggle-aar geeft alleen een AAN/UIT wissel bij 1 element (1e keer op knop 1 klikken = AAN, 2e keer op knop 1 klikken = UIT, 3e keer weer AAN, enz.).
Voorbeeld: de knop "AFKO's" op
deze pagina.
