Tag: HTML

Javascript – Afficher / cacher un élément HTML

DevFrançaisTutorials

Comment jouer à cache-cache avec des éléments HTML, avec un petit bout de code javascript complètement réutilisable ?
C’est la question du jour de nos amis d’outre-quévin qui aiment la batavia !

Prenons une page HTML (nous appellerons cette page HTML “castor” dans le reste du document) relativement simple :

<html>
<head>
  <title>Test</title>
</head>

<body>

<h3>Voici une liste FAQ passionnante</h3>
<br/>
<strong>Les multivers ont-ils un référentiel temporel commun ?</strong>
<div id="FAQ_1">
  C'est une excellente question et je vous remercie de l'avoir posée.
  Vous ne pensez tout de même pas qu'un type dans mon genre à la réponse ? 
  Appelez Stephen Hawking de ma part, il sera ravi de vous aider !
</div>
<br/>
<strong>Comment se fait-il que lors d'un décès, il existe une 
disparition de l'information ?</strong>
<div id="FAQ_2">
  Alors là, la question est celle du poids de l'information et 
  de sa place dans l'univers. Effectivement lorsque quelqu'un meurt,
  de l'information disparait ou du moins retourne à l'état de matière 
  qui en est le stade primitif.
</div>
<br/>
<strong>FAQ dinosaures :</strong>
<table align="center" border="1">
  <tr>
    <th>N°</th>
    <th>Nom</th>
    <th>Caractéristiques</th>
  </tr>
  <tr id="tableau" class="minimized">
    <td>1</td>
    <td>Allosaure</td>
    <td>
      Ancètre du tyranosaure, l'allosaure est un carnivore redoutable, 
      l'apparition  du téléphone à scellé le sort de l'Allo...
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Ankylosaure</td>
    <td>
      Herbivore sympathique, l'ankylosaure pouvait se défendre 
      efficacement contre des prédateurs bien plus gros que lui 
      grâce à la lourde boule qui terminait sa queue.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Ptérosaure</td>
    <td>
      Le roi des airs, il était même capable de chanter à la perfection 
      l'air de la Reine de la nuit de la flute enchantée !
    </td>
  </tr>
</table>
</body>
</html>

Et donc à partir de ce castor (cette page HTML pour ceux qui n’ont pas tout lu) nous voulons cacher les réponses de la FAQ et ne les afficher qu’à la demande expresse… de nos amis d’outre-quévin justement…
Donc l’objectif est d’avoir une page qui cache le contenu mais pas les titres.
Nous allons utiliser 2 petites images ma foi fort sympathiques :
et

Voici les améliorations à effectuer :
– Ajout des styles min et max (dans la partie HEAD) qui cachent et affichent un élément possédant un ID :

<head>
  <title>Test</title>
  <style type="text/css">
    .min { display:none; }
    .max { display:''; }
  </style>
</head>

– Association des styles class=”min” avec les éléments que l’on souhaite cacher au lancement de la page, exemple avec le FAQ_1 :

<div id="FAQ_1" class="min">
  C'est une excellente question et je vous remercie de l'avoir posée.
  Vous ne pensez tout de même pas qu'un type dans mon genre à la réponse ? 
  Appelez Stephen Hawking de ma part, il sera ravi de vous aider !
</div>

– Ajout d’une méthode javascript pour gérer le changement de style d’un élément et d’une autre pour gérer le changement de la source de l’image (il est bien sur possible de tout mettre dans une seule méthode mais, et nous le verrons plus bas, elle aurait été peu réutilisable) :

</head>
<script type="text/javascript">
<!--
// Pour afficher ou cacher n'importe quel élément HTML possédant un ID
function afficheCache(id) {
   var elem = document.getElementById(id);
   if (elem) {
       if (elem.className != 'min') {
         elem.className = 'min';
       }
       else {
         elem.className = 'max';
       }
   }
}

// Pour changer la source d'une image en fonction du style d'un élément HTML
function imgAfficheCache(img, id) {
   afficheCache(id)
   var elem = document.getElementById(id);
   if (elem) {
       if (elem.className != 'min') {
         img.src="moins.gif"
       }
       else {
         img.src="plus.gif"
       }
   }
}
//-->
</script>
<body>

– Ajout des images d’action qui apellent le JS pour cacher/afficher les éléments :

<img src="plus.gif" title="Afficher/Cacher" onclick="imgAfficheCache(this, 'FAQ_1')" />
<strong>Les multivers ont-ils un référentiel temporel commun ?</strong>
<div id="FAQ_1" class="min">
  C'est une excellente question et je vous remercie de l'avoir posée.
  Vous ne pensez tout de même pas qu'un type dans mon genre à la réponse ? 
  Appelez Stephen Hawking de ma part, il sera ravi de vous aider !
</div>

Bien faire attention aux id qui correspondent aux blocks que l’on souhaite cacher

Pour montrer la ré-utilisabilité du code on ajoute une petite ligne (sans image) qui permet d’afficher ou de cacher la première ligne du tableau de la FAQ_3 :

<span onclick="afficheCache('TAB_1')" >Cliquez-moi pour afficher ou cacher 
la 1ere ligne du tableau !</span>

Vous noterez qu’au lieu de passer par imgAfficheCache(), on utilise afficheCache() qui se fiche de changer une image.

Voici le code complet de la page :

<html>
<head>
  <title>Test</title>
  <style type="text/css">
    .min { display:none; }
    .max { display:''; }
  </style>
</head>
<script type="text/javascript">
<!--
// Pour afficher ou cacher n'importe quel élément HTML possédant un ID
function afficheCache(id) {
   var elem = document.getElementById(id);
   if (elem) {
       if (elem.className != 'min') {
         elem.className = 'min';
       }
       else {
         elem.className = 'max';
       }
   }
}

// Pour changer la source d'une image en fonction du style d'un élément HTML
function imgAfficheCache(img, id) {
   afficheCache(id)
   var elem = document.getElementById(id);
   if (elem) {
       if (elem.className != 'min') {
         img.src="moins.gif"
       }
       else {
         img.src="plus.gif"
       }
   }
}
//-->
</script>

<body>

<h3>Voici une liste FAQ passionnante</h3>
<br/>
<img src="plus.gif" title="Afficher/Cacher" onclick="imgAfficheCache(this, 'FAQ_1')" />
<strong>Les multivers ont-ils un référentiel temporel commun ?</strong>
<div id="FAQ_1" class="min">
  C'est une excellente question et je vous remercie de l'avoir posée.
  Vous ne pensez tout de même pas qu'un type dans mon genre à la réponse ? 
  Appelez Stephen Hawking de ma part, il sera ravi de vous aider !
</div>
<br/>
<br/>
<img src="plus.gif" title="Afficher/Cacher" onclick="imgAfficheCache(this, 'FAQ_2')" />
<strong>Comment se fait-il que lors d'un décès, il existe une 
disparition de l'information ?</strong>
<div id="FAQ_2" class="min">
  Alors là, la question est celle du poids de l'information et 
  de sa place dans l'univers. Effectivement lorsque quelqu'un meurt,
  de l'information disparait ou du moins retourne à l'état de matière 
  qui en est le stade primitif. Ce qui je l'accorde reste extrèmement
  perturbant !
</div>
<br/>
<br/>
<img src="plus.gif" title="Afficher/Cacher" onclick="imgAfficheCache(this, 'FAQ_3')" />
<strong>FAQ dinosaures :</strong>
<table align="center" id="FAQ_3" border="1" class="min">
  <tr>
    <th>N°</th>
    <th>Nom</th>
    <th>Caractéristiques</th>
  </tr>
  <tr id="TAB_1" class="min">
    <td>1</td>
    <td>Allosaure</td>
    <td>
      Ancètre du tyranosaure, l'allosaure est un carnivore redoutable, 
      l'apparition  du téléphone à scellé le sort de l'Allo...
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Ankylosaure</td>
    <td>
      Herbivore sympathique, l'ankylosaure pouvait se défendre 
      efficacement contre des prédateurs bien plus gros que lui 
      grâce à la lourde boule qui terminait sa queue.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Ptérosaure</td>
    <td>
      Le roi des airs, il était même capable de chanter à la perfection 
      l'air de la Reine de la nuit de la flute enchantée !
    </td>
  </tr>
</table>
<br/>
<br/>
<br/>
<br/>
<span onclick="afficheCache('TAB_1')" >Cliquez-moi pour afficher ou cacher la 1ere ligne du tableau !</span>

</body>
</html>

Bonne journée !