Lo script che presentiamo permette di nascondere o espandere intere porzioni di codice. I contenuti a cui applicare l'effetto dovranno essere racchiusi in un DIV e non ci sarà bisogno di ricaricare la pagina per passare da uno stato all'altro.
Il codice è compatibile con Explorer 5.x e con Netscape 6.x mentre con Navigator verrà mostrato direttamente il contenuto espanso.
- 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.
Il codice javascript va inserito tra i tag <head> della pagina:
<script type="text/javascript">
var enablepersist="on"
if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}
function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}
function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}
function expandcontent(cid){
if (typeof ccollect!="undefined"){
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.d
isplay!="block")? "block" : "none"
selectedItem=cid+"|"+document.getElementById(cid).style.display
}
}
function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
contractcontent(selectedComponents[0])
document.getElementById(selectedComponents[0]).style.display=selectedComponents[
1]
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length> 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}
function saveswitchstate(){
if (typeof selectedItem!="undefined")
document.cookie=window.location.pathname+"="+selectedItem
}
function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && getselectedItem()!="")
revivecontent()
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate
</script>
L'unica variabile da personalizzare è
var enablepersist="on"
impostandola su "on" faremo in modo di conservare l'ultimo stato ottenuto per ogni DIV (espanso o contratto) anche ricaricando la pagina.
impostandola su "off", invece, i contenuti dei DIV saranno sempre inizialmente nascosti dopo ogni accesso alla pagina.
Non resta che preparare il codice per gli elementi a cui applicare l'effetto.
Dobbiamo associare ad un testo o ad una immagine il relativo contenuto espandibile.
<h3 onClick="expandcontent('sc1')" style="cursor:hand;">Clicca qui!</h3>
Come potete vedere la stringa che richiama il javascript è stata applicata, in questo caso, al tag <H3> di un testo ma si poteva utilizzare anche un'immagine:
<img src="immagine.gif" onClick="expandcontent('sc1')" style="cursor:hand;"/>
Ciè che è importante infatti è la stringa:
onClick="expandcontent('scN')"
In questa stringa (che al click del mouse permette di espandere o contrarre i contenuti) dobbiamo solamente modificare il numero N tra parentesi. Il primo link avrà come valore 1 ('sc1'), il secondo dovrà avere indice 2 ('sc2') e così via.
A questo punto prepariamo i DIV con i contenuti da espandere. Ogni DIV sarà associato al relativo LINK tramite l'indice numerico ovviamente:
<div id="sc1" class="switchcontent">
CONTENUTI
</div>
I contenuti potranno essere qualsiasi cosa: immagini, testo, codice html. L'importante è racchiuderli in un DIV in cui personalizzare il valore dell'attributo "id".
Il primo DIV avrà:
id="sc1"
Il secondo DIV avrà
id="sc2"
e così via.
Altre modifiche non sono necessarie.
