BlocNotes

Même script que là mais avec le lien "afficher" qui change et devient "masquer" lorsque la div est affichée.

<script>
function visibilite(thingId,txtAff,txtMasque)
{
var targetElement; var targetElementLink;
targetElement = document.getElementById(thingId) ;
targetElementLink = document.getElementById(thingId+'Link');
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
targetElementLink.innerHTML = txtMasque ;
} else {
targetElement.style.display = "none" ;
targetElementLink.innerHTML = txtAff ;
}
}
</script>
<a href="javascript:visibilite('Div1','Afficher la zone 1','Masquer la zone 1');" id="Div1Link">Afficher la zone 1</a>
<div id="Div1" style="display:none;">contenu</div>
<br>
<a href="javascript:visibilite('Div2','...ou la zone 2','Masquer la zone 2');" id="Div2Link">...ou la zone 2</a>
<div id="Div2" style="display:none;">contenu</div>

J'ai eu quelques fois le bug, sans pour autant en trouver la cause exacte : une zone de texte disparait sous IE. Elle est pourtant bien là puisqu'en sélectionnant le texte il apparait.

Rajouter position:relative ou une largeur permet de fixer le problème.

[Source : Ten more CSS tricks you may not know]