Cara Membuat Tombol Hide Show atau Spoiler

Tombol Hide and Show atau lebih dikenal dengan Spoiler adalah sebuah widget untuk menyembunyikan sebuah konten pada sebuah halamana. Fungsinya adalah agar artikel pada sebuah halaman tidak terlihat terlalu penuh, sampai-sampai pengunjung  harus meng scrool halaman lebih dalam lagi.
Tentu saja selain untuk menyembunyikan sebuah konten pada sebuah artikel juga berfungsi sebagai estetika pada sebuah halaman. Sehingga pengunjung lebih tertarik untuk terus membaca artikel yang anda tulis.

Oke kita langsung saja mencoba ke TKP;

Ketika anda membuat sebuah artikel tentu anda masuk pada posting atau membuat halaman.. Pilihlah Tombol HTML ketika anda ingin membuat Hideshow / spoiler, lalu masukan script berikut :

Klik Disini Untuk membuka

 <div><div style="margin-bottom: 2px;"><b><small>Klik Disini Untuk Membuka</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 100px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup Malu ah'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Dong'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukan Teks / Gambar / Script / bisa juga youtube DISINI
</div> 
</div> 
</div>

Posted in: Trick