Create a spoiler in Javascript, CSS and XHTML

January 2017


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


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 (ccm.net).