Create a spoiler in Javascript, CSS and XHTML

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';
Published by jak58. Latest update on March 20, 2014 at 05:58 AM by deri58.
This document, titled "Create a spoiler in Javascript, CSS and XHTML," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (
Enable Javascript on Nintendo DSI
How To Disable JavaScript on Google Chrome