Create a spoiler in Javascript, CSS and XHTML

December 2016


Create a spoiler (show/hide effect) in Javascript, CSS and XHTML



Here below is a small script create some kind of spoiler in Javascript, allowing you to display or hide a div upon click.
We will make use of two div:
  • The first one will display our text with a link...upon clicking a second div shall be displayed
  • The second div contains a link. This link allows you to hide the div.

We'll use two JavaScript functions, CSS and XHTML of course.
In our first div:
<div id="layer1">      
Plusieurs langages de développement Web existent : <a href="#" onclick="afficher()" id="layer3">Afficher les langages</a>
</div>
Create the second div. This div is hidden and will only be displayed upon clicking on the first one:
<div id="layer2">      
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li><a href="#" onclick="fermer()">Cacher</a></li>
</ul>

Now for the CSS part:

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

#layer2 {
visibility : hidden;
position : absolute;
}
The 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';
}

Related :

This document entitled « Create a spoiler in Javascript, CSS and XHTML » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.