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:
Plusieurs langages de développement Web existent : Afficher les langages
Create the second div. This div is hidden and will only be displayed upon clicking on the first one:
- XHTML
- CSS
- PHP
- Cacher
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';
}
Popular information
Popular articles
Latest articles
