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.
