Pseudo

Password

E-mail

Titre : montrer ou cacher un bloc de texte

Article posté par : Administrateur

Date de mise en ligne : 2009-10-01

Vue : 1829 fois

Comment montrer ou cacher un bloc de texte avec la fonction getElementById. a onclick="document.getElementById('****') est la fonction qui permet d'ouvrir ou fermer le "div". La fonction inclue un "ID" unique que j'ai nomé "ouverture". div id="ouverture" est donc associé au 2 "document.getElementById"

Exemple 1:

<a onclick="document.getElementById('ouverture').style.display='block'" href="javascript:;">Clic ici</a>
<div id="ouverture" style="border: 2px solid rgb(209, 29, 67); padding: 5px; display: none;">
      <p>Ici mon texte</p>
<a onclick="document.getElementById('ouverture').style.display='none'" href="javascript:;">Fermer cette fenetre</a></div>

 

Pour utiliser plusieurs fois cette fonction sur une meme page,  il vous suffit simplement de changer "l'id".

Exemple 2:

<a onclick="document.getElementById('ouverture').style.display='block'" href="javascript:;">Clic ici</a>
<div id="ouverture" style="border: 2px solid rgb(209, 29, 67); padding: 5px; display: none;">
      <p>Ici mon texte</p>
<a onclick="document.getElementById('ouverture').style.display='none'" href="javascript:;">Fermer cette fenetre</a></div>

<a onclick="document.getElementById('secondeouverture').style.display='block'" href="javascript:;">Clic ici</a>
<div id="secondeouverture" style="border: 2px solid rgb(209, 29, 67); padding: 5px; display: none;">
      <p>Ici mon texte</p>
<a onclick="document.getElementById('secondeouverture').style.display='none'" href="javascript:;">Fermer cette fenetre</a></div>

 

Vous pouvez egalement déterminer la taille du "div" en y attribuent l'élément "width".

Exemple 3:

<a onclick="document.getElementById('ouverture').style.display='block'" href="javascript:;">Clic ici</a>
<div id="ouverture" style="border: 2px solid rgb(209, 29, 67); padding: 5px; width: 410px; display: none;">
      <p>Ici mon texte</p>
<a onclick="document.getElementById('ouverture').style.display='none'" href="javascript:;">Fermer cette fenetre</a></div>