1
Thanks

A few words of thanks would be greatly appreciated.

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

1
Thanks

A few words of thanks would be greatly appreciated.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jean-François Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.
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 (ccm.net).