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
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.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team

Related

Published by . Latest update on 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 (https://ccm.net/).

0 Comments