Montrer ou cacher un bloc de texte avec getElementById

Pour afficher ou cacher un bloc, on utilise une petite fonction javascript à placé dans l'entête de votre document (entre <head et </head>) qui permet de "basculer" notre fameux "bloc" à l'état de "cacher" ou "montrer" grace à l'élément display en block ou none.

Dans l'exemple ci-dessous, la fonction se nomme "bascule".
<script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";
   }
   else{
   document.getElementById(elem).style.display="none";
   }
   }
</script>
Voici comment on l'utilise :
<a href="" onclick="bascule('1'); return false;">Mon titre</a>
<div id='1' style='display:none;'>Mon texte</div>
L'évènement onclick (qui est ni plus ni moins qu'un lien) contient le nom de la fonction (bascule) avec en paramètre le nom de l'élément (1) que l'on souhaite faire basculer d'un mode à l'autre. Juste en dessous, un simple "div" avec un "id" unique qui reprend le nom de l'élément (1) et qui est caché grace au style css "display:none".

Pour une succession de "div", il suffit simplement de changer la valeur de la fonction bascule (1) et de l'id du "div" qui suit.

Un petit exemple avec une légère mise en forme :
<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('1'); return false;">Mon titre 1</a>
<div id='1' style='display:none;'>Mon texte 1</div>
</div>

<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('2'); return false;">Mon titre 2</a>
<div id='2' style='display:none;'>Mon texte 2</div>
</div>

<div style="border:1px solid green;margin:5px;padding:5px;">
<a href="" onclick="bascule('3'); return false;">Mon titre 3</a>
<div id='3' style='display:none;'>Mon texte 3</div>
</div>
Résultat :
Mon titre 1
Mon titre 2
Mon titre 3
En cliquant sur un lien une ou deux fois, le "div" concerné par la fonction bascule d'un état à l'autre.
Voir/déposer un commentaire (14) | Signaler un problème