Comment afficher ou cacher une DIV avec un bouton en HTML et JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2019-10-20 15:06:15

Question

Comment faire pour afficher ou cacher une balise DIV en cliquant sur un un bouton, en HTML et JavaScript ?

Réponse

Pour afficher ou cacher une balise DIV via un bouton, en HTML, en utilisant JavaScript, vous devez :

Attribuer un ID à la balise DIV.
Créer un Bouton HTML avec un évènement onclick.
Créer une fonction JavaScript pour afficher ou cacher la balise DIV concernée.

Pour afficher ou cacher le contenu de la balise DIV on utilise la propriété CSS Display.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button onclick="maFonction()">Bouton</button>

<div id="maDIV" style="display:none;">
Contenu de la balise DIV à afficher ou à cacher
</div>

<script>
function maFonction() {
  var div = document.getElementById("maDIV");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>
</body>
</html>

Si vous voulez faire plusieurs spoilers sur une même page, référez vous à cette autre question.