Comment faire un spoiler multiple en HTML et JavaScript ?
Comment faire un spoiler multiple en HTML et JavaScript, c'est à dire cacher tous les éléments ouverts, et n'ouvrir que celui sur lequel on clique, et vis et versa ? Merci.
Dernière mise à jour du script en date du 24/03/2022
Pour faire un spoiler multiple en HTM, vous pouvez utiliser du code JavaScript ainsi que du CSS.
Vous pouvez créer deux CLASS CSS nommées afficher et cacher avec la propriété visibility et les valeurs hidden et visible.
On crée ensuite une fonction JavaScript et on utilise une boucle for pour identifier tous les éléments qui sont ouverts, c'est à dire qui disposent de la CLASS afficher, on enlève la CLASS afficher et on la remplace par cacher, puis ensuite on ajoute la CLASS afficher uniquement à l'éléments cliqué.
Voici un exemple pour créer un spoiler multiple en HTML, CSS et JavaScript :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment faire un spoiler multiple en HTML et JavaScript ?</title>
<style>
.cacher {
height: 0;
visibility: hidden;
}
.afficher {
height: auto;
visibility: visible;
}
</style>
</head>
<body>
<div onclick="ouvrirFermerSpoiler(this);">
<span>Spoiler 1</span>
<div class="spoiler">
<div class="contenuSpoiler cacher">
Contenu spoiler 1
</div>
</div>
</div>
<div onclick="ouvrirFermerSpoiler(this);">
<span>Spoiler 2</span>
<div class="spoiler">
<div class="contenuSpoiler cacher">
Contenu spoiler 2
</div>
</div>
</div>
<div onclick="ouvrirFermerSpoiler(this);">
<span>Spoiler 3</span>
<div class="spoiler">
<div class="contenuSpoiler cacher">
Contenu spoiler 3
</div>
</div>
</div>
<script>
function ouvrirFermerSpoiler(div)
{
var spoilers = document.getElementsByClassName("contenuSpoiler");
var spoiler_clic = div.querySelector(".contenuSpoiler");
for (var i = 0, nombres = spoilers.length; i < nombres; i++)
{
if ((spoilers[i].classList.contains("afficher") == true) && (spoilers[i] != spoiler_clic))
{
spoilers[i].classList.remove ('afficher');
spoilers[i].classList.toggle ('cacher');
}
}
var divContenu = div.getElementsByTagName('div')[1];
if (divContenu.classList.contains("cacher") == true)
{
divContenu.classList.remove ('cacher');
divContenu.classList.toggle ('afficher');
}
else if (divContenu.classList.contains("afficher") == true)
{
divContenu.classList.remove ('afficher');
divContenu.classList.toggle ('cacher');
}
}
</script>
</body>
</html>