Faire un spoiler en Javascript, CSS et Xhtml

Pour faire une sorte de spoiler qui vous permettra d'afficher et de cacher un div au clic, j'ai un petit script écrit par moi même que je souhaite partager.

Ici nous aurons deux div :

La première ou sera affiché notre texte par défaut avec un lien, qui au clic, affichera un second div.
Dans le second div, un lien qui vous permettra de cacher ce div.

Nous allons utiliser deux fonctions Javascript, du Css et du XHTML bien sûr.

D'abord notre premier div :

<div id="layer1">      
Plusieurs langages de développement Web existent : <a href="#" onclick="afficher()" id="layer3">Afficher les langages</a>      
</div>      

Maintenant créons le second div qui sera caché par défaut, et qui s'affichera au clic sur précédent

<div id="layer2">      
<ul>      
<li>XHTML</li>      
<li>CSS</li>      
<li>PHP</li>      
<li><a href="#" onclick="fermer()">Cacher</a></li>      
</ul>      

On passe maintenant au css :

#layer1 {      
visibility : visible;      
position : relative;      
}      

#layer2 {      
visibility : hidden;      
position : absolute;      
}      

Et le Javascript :

function afficher() {   
document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative';   
document.getElementById('layer3').style.visibility='hidden';   
}   
        
function fermer() {   
document.getElementById('layer2').style.visibility ='hidden';   
document.getElementById('layer2').style.position ='absolute';   
document.getElementById('layer3').style.visibility='visible';   
}   

J'espère que ça vous aidera :)
Ce document intitulé « Faire un spoiler en Javascript, CSS et Xhtml » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.