Il existe plusieurs solutions pour développer/supprimer du texte :
1ère solution :
<html>
<head>
<script type="text/javascript">
function displaytext(idbt,iddiv)
{
if (idbt=="idbt1")
{
document.getElementById("iddiv1").innerHTML="-- blabla";
document.getElementById("idbt1").innerHTML="masquer le texte";
document.getElementById("idbt1").setAttribute("onclick","removetext(this,'iddiv1')");
}
else if(idbt=="idbt2")
{
document.getElementById("iddiv2").innerHTML="---blabla2";
document.getElementById("idbt2").innerHTML="masquer le texte";
document.getElementById("idbt2").setAttribute("onclick","removetext(this,'iddiv2')");
}
else if(idbt=="idbt3")
{
même traitement pour le troisième cas....
}
}
function removetext(idbt,iddiv)
{
if (idbt=="idbt1")
{
document.getElementById("iddiv1").innerHTML="";
document.getElementById("idbt1").innerHTML="afficher le texte";
document.getElementById("idbt1").setAttribute("onclick","displaytext(this,'iddiv1')");
}
else if(idbt=="idbt2")
{
document.getElementById("iddiv2").innerHTML="";
document.getElementById("idbt2").innerHTML="afficher le texte";
document.getElementById("idbt2").setAttribute("onclick","displaytext(this,'iddiv2')");
}
else if(idbt=="idbt3")
{
même traitement pour le troisième cas....
}
}
</script>
</head>
<body>
<button id="idbt1" onclick="displaytext(this,'iddiv1')">afficher le texte</button>
<div id="iddiv1"></div>
<button id="idbt2" onclick="displaytext(this,'iddiv2')">afficher le texte</button>
<div id="iddiv2"></div>
<button id="idbt3" onclick="displaytext(this,'iddiv3')">afficher le texte</button>
<div id="iddiv3"></div>
</body>
Voici la première solution, vous pouvez aussi utiliser la propriété CSS display (et non pas visible/hidden qui ne libère pas l'espace à l'écran).
Bon courage!...
</html>