Bikin Teks/Gambar Buka Tutup (Spoiler)

Waktu jalan - jalan bersama kakek Google, saya ketemu ama temen blogger yang cukup menarik perhatian saya. Lucu, ringkas, praktis.. wah menarik deh pokoknya. Spoiler namanya, kayak gini nih..

Hwaha.. Keren kan..

Spoiler ini selain bikin page blog jadi ringkas, juga bikin tampilan lebih menarik, bisa kita pasang di postingan atau juga di sidebar. Caranya cukup mudah, tinggal copypaste script di bawah ini.

<div id="spoiler"><div><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP LAGI'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI DUNK'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="KLIK UNTUK MELIHAT" /><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">TARUH DISINI GAMBAR ATAU TEKS YANG DIBUKA TUTUP</div><div id="hide"></div></div></div>

Tulisan warna merah : sobat ganti dengan tulisan atau gambar yang mau dibuka tutup
Tulisan warna kuning: besar kecil font pada tombol, bisa diganti sesuai selera

Nah, sekarang kita coba yuk..

Berita Terkait :