Creați un spoiler în Javascript, CSS și XHTML

Creați un spoiler (efect de afișare / ascundere) în Javascript, CSS și XHTML

Mai jos este un mic script care creează un tip de spoiler în Javascript, permițându-vă să afișați sau să ascundeți un div după clic.

Vom folosi două div:

Primul va afișa textul nostru cu un link ... dând clic pe un al doilea div va fi afișat
A doua div conține o legătură. Acest link vă permite să ascundeți div.

Vom utiliza două funcții JavaScript, CSS și XHTML desigur.

În primul div:

Plusieurs langages de développement Existența web-ului: Afficher les langages

Creați al doilea div. Acest div este ascuns și va fi afișat numai când faceți clic pe primul:

XHTML

cacher

Acum pentru partea CSS:

 # layer1 {
vizibilitate: vizibil;
poziția: relativă;
}
# layer2 {
vizibilitate: ascuns;
poziția: absolută;
}

JavaScript:

 funcția afficher () {
document.getElementById ('layer2'). style.visibility = 'vizibil'; document.getElementById ('layer2'). style.position = 'relativ';
. Document.getElementById ( 'Layer3') style.visibility = 'ascunse';
}
funcția fermer () {
document.getElementById ('layer2'). style.visibility = 'ascuns';
document.getElementById ('layer2'). style.position = 'absolut';
. Document.getElementById ( 'Layer3') style.visibility = 'vizibil';
}