Lo script che presentiamo crea dei livelli nascosti che possono contenere qualsiasi elemento: immagini, testo, tabelle. Cliccando su un link sarà possibile espandere il livello per mostrarne il contenuto.
Il codice è semplicissimo da inserire e non richiede personalizzazione. Potrà essere utile in quei casi in cui si debbano introdurre delle informazioni che, per esempio, non vogliamo rendere subito visibili perchè cambierebbero l'aspetto della pagina.
Lo script funziona sia con Explorer che con Netscape 6.x mentre Navigator 4.x mostrerà la pagina con i livelli direttamente espansi.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo quanto segue tra i tag <head> della pagina
<script type="text/javascript" language="javascript">
<!--
var ns6=document.getElementById&&!document.all?1:0
var head="display:''"
var folder=''
function expandit(curobj){
folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+
1].style
if (folder.display=="none")
folder.display=""
else
folder.display="none"
}
//-->
</script>
Queste codice non va personalizzato e può essere lasciato così.
Adesso dobbiamo inserire, nel corpo della pagina (nel punto che preferiamo), i livelli che conterranno gli elementi da mostrare.
Ogni livello sarà così strutturato:
<h3 style="cursor:hand" onClick="expandit(this)">Clicca per espandere il livello</h3>
<span style="display:none" style=&{head};>
Testo, Immagini, Elementi da inserire
</span>
Come potete notare ciò che dovremo personalizzare sarà tutto il contenuto inserito tra i tag
<span style="display:none" style=&{head};>
e
</span>
Potrà essere inserito qualsiasi tag HTML: tabelle, immagini, link etc.
Per utilizzare più livelli nella stessa pagina basterà duplicare la sintassi appena analizzata senza ulteriori modifiche.
Nel caso, invece, volessimo un'immagine al posto del testo per espandere il livello basterà cambiare
<h3 style="cursor:hand" onClick="expandit(this)">Clicca per espandere il livello</h3>
in
<img src="vostraimmagine.gif" onClick="expandit(this)" style="cursor:hand"/>
