Create a spoiler in Javascript, CSS and XHTML

Ask a question

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';
Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team