per come è strutturata la funzione devi inizializzare tutti gli elementi che desideri "switchare" (dove dice
/*le modifiche allo script vanno solo fatte qui*/)
codice:
if(document.getElementById && document.createElement){
document.write('<style type="text/css">*.toggle{display:none}</style>');
window.onload=function(){
/*le modifiche allo script vanno solo fatte qui*/
Attiva("showhide","visualizza dettaglio","nascondi dettaglio");
Attiva("showhide2","visualizza dettaglio","nascondi dettaglio");
Attiva("immagine","visualizza immagine","nascondi immagine");
}
}
function Attiva(id,s1,s2){
var el=document.getElementById(id);
el.style.display="none";
var c=document.createElement("div");
var link=document.createElement("a");
link.href="#";
link.appendChild(document.createTextNode(s1));
link.onclick=function(){
link.firstChild.nodeValue = (link.firstChild.nodeValue==s1) ? s2 : s1;
el.style.display=(el.style.display=="none") ? "block" : "none";
return(false);
}
c.appendChild(link);
el.parentNode.insertBefore(c,el);
}
e questa è la pagina che lo richiama:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Interazione con javascript: Esempio 4</TITLE>
<SCRIPT src="Interazione con javascript Esempio 4_file/showhide.js" type=text/javascript></SCRIPT>
</HEAD>
<BODY>
<H1>Mostra nascondi con javascript</H1>
capitolo uno
<DIV id=showhide>
dettaglio uno</P>
</DIV>
capitolo due
<DIV id=showhide2>
dettaglio due</P>
</DIV>
</BODY>
</HTML>