Cara Membuat Spoiler Sederhana Dengan Javascript

Whidie ID 27 Aug 2017 - 08:38 3 Komentar

Hai sobat, pada kesempatan kali ini saya @CSi akan membahas Cara Membuat Spoilder Sederhana Dengan Javascript, silahkan simak dibawah yah.

First before Learning : Apa sih spoiler itu??

SPOILER



Nah itulah contoh spoiler sob, cara membuatnya hanya dengan mengganti attribut style ke block atau none.

Ini Decodenya sob
HTML
<input type="button" onclick="spoilerShow()" value="Buka" id="buttonshow"/>
<input type="button" onclick="spoilerClose()" value="Tutup" style="display:none;" id="buttonclose"/>
<div id="spoiler" style="display:none;"> TEKS GAMBAR DISINI
</div>

JAVASCRIPT
<script type="text/javascript">
function spoilerShow(){
document.getElementById("spoiler").style.display="block";
document.getElementById("buttonshow").style.display="none";
document.getElementById("buttonclose").style.displya="block";
}

function spoilerClose(){
document.getElementById("spoiler").style.display="none";
document.getElementById("buttonshow").style.display="block";
document.getElementById("buttonclose").style.display="none";
}
</script>

Pada skrip diatas dapat diperoleh :
- Function spoilerShow(), menampilkan spoiler dan tombol tutup serta menyembunyikan tombol buka.
- Function spoilerClose(), menyembunyikan spoiler dan tombol tutup serta menampilkan tombol buka.

Dapat juga diperoleh :

- document.getElementById("spoiler").style.display="block" berfungsi mengambil ID Spoiler dan mengatur attribut style menjadi display block.

- document.getElementById("buttonshow").style.display="none" berfungsi mengambil ID buttonshow dan mengatur attribut style menjadi display none, karena jika spoiler sudah muncul maka tombol buka di sembunyikan.

- document.getElementById("buttonclose").style.display="block" berfungsi mengambil ID buttonclose dan mengatur attribut style menjadi display block, karena spoiler sudah muncul maka tombol untuk menutup ditampilkan.

- document.getElementById("spoiler").style.display="none" berfungsi menyembunyikan spoiler karena tombol tutup diklik lalu memanggil function spoilerClose().

- document.getElementById("buttonshow").style.display="block" berfungsi menampilkan tombol buka karena spoiler kini sudah disembunyikan.

- document.getElementById("buttonclose").style.display="none" berfungsi menyembunyikan tombol tutup karena spoiler kini sudah di sembunyikan.

Jadi begitu sob penjelasannya, jika minat ini silahkan dicopas kodenya yah :
SPOILER


Sekian dari postingan ini, semoga bermanfaat yah sobat.

Komentar

3 Tanggapan dari "Cara Membuat Spoiler Sederhana Dengan Javascript"

Komentar baru











Please refresh...

Smiley