Ho scaricato da HTML questo semplice script:

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("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=showhide>


dettaglio due</P>
</DIV>
</BODY>
</HTML>

Il problema è che solo per il primo dei due DIV la funzione lavora e non per il secondo. C'è un modo per farla funzionare su tutta la pagina senza bisogno di creare un id diverso per ogni nuovo DIV?

Grazie a tutti