: javascript

Afficher Masquer

L'objectif de cet exercice est de créer un mécanisme permettant d'afficher ou de masquer un élément HTML (une section de page) a l'aide d'un bouton (texte). Voici le code HTML de départ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
  <p>Un peu de texte <span id='bouton'>lire la suite</span></p>
  <div id='section'>
    <p>La suite en question</p>
  </div>
</body>
</html>

Il faut ajouter un style CSS au div section pour qu'il soit invisible initialement. Ensuite il faut gérer l'évenement onclick sur le span bouton et agir sur le style CSS du div section pour le faire apparaitre si il était caché, ou le cacher si il était visible. Cela nécessitera l'usage d'un test.

Solution

Afficher
window.onload = function() {

  var b = document.getElementById('bouton');
  b.onclick = function() {
    var e = document.getElementById('section');
    if(e.style.display=='block') {
      e.style.display = 'none';
    }
    else {
      e.style.display = 'block';
    }
  }

}
Editer