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.

Catégorie Créer son site

Commentaire sur : Montrer ou cacher un bloc de texte avec getElementById
Signaler une erreurSignaler une erreur

Protection par fichier htaccess d'un dossier sous Free.frProtection par fichier htaccess d'un dossier sous Free.frTrucs et astuces pour créer et/ou améliorer un siteTrucs et astuces pour créer et/ou améliorer un site Kit graphique gratuit - Free templateKit graphique gratuit - Free template