Create a spoiler in Javascript, CSS and XHTML

October 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>
Create the second div. This div is hidden and will only be displayed upon clicking on the first one:
<div id="layer2">      
<li><a href="#" onclick="fermer()">Cacher</a></li>

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';

function fermer() {
document.getElementById('layer2').style.visibility ='hidden';
document.getElementById('layer2').style.position ='absolute';

Related :

This document entitled « Create a spoiler in Javascript, CSS and XHTML » from CCM ( 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.