Buat spoiler dalam Javascript, CSS dan XHTML

Buat spoiler (tampilkan / sembunyikan efek) dalam Javascript, CSS dan XHTML

Di sini di bawah ini adalah skrip kecil membuat semacam spoiler dalam Javascript, memungkinkan Anda untuk menampilkan atau menyembunyikan div saat klik.

Kami akan menggunakan dua div:

Yang pertama akan menampilkan teks kita dengan tautan ... setelah mengklik div kedua akan ditampilkan
Div kedua berisi tautan. Tautan ini memungkinkan Anda untuk menyembunyikan div.

Kami akan menggunakan dua fungsi JavaScript, CSS dan XHTML tentu saja.

Di div pertama kami:

Plusieurs langages de développement Web ada: A les les les

Buat div kedua. Div ini disembunyikan dan hanya akan ditampilkan setelah mengklik yang pertama:

XHTML

Cacher

Sekarang untuk bagian CSS:

 # layer1 {
visibilitas: terlihat;
posisi: relatif;
}
# layer2 {
visibilitas: tersembunyi;
posisi: absolut;
}

JavaScript:

 function afficher () {
document.getElementById ('layer2'). style.visibility = 'terlihat'; document.getElementById ('layer2'). style.position = 'relatif';
document.getElementById ('layer3'). style.visibility = 'disembunyikan';
}
function fermer () {
document.getElementById ('layer2'). style.visibility = 'disembunyikan';
document.getElementById ('layer2'). style.position = 'absolute';
document.getElementById ('layer3'). style.visibility = 'terlihat';
}