Membuat Text Area III (Hide and Show Atau Spoiler)

Text Area kali ini yang akan kita buat yaitu dengan efek Hide and Show atau biasa disebut juga dengan Spoiler,
setelah sebelumnya saya posting "Membuat Text Area Highlight". Hampir sama mengenai fungsi dari text area dan cara menerapkannya, namun yang membuatnya sedikit berbeda, yaitu penghematan bidang atau ruang yang
dibutuhkan saat memasukkan kode atau text yang panjang, singkatnya menyembunyikan isi kolom (Lebih jelas
bentuknya silahkan lihat dan klik tombol berikut).

JUDUL SPOILER
<div>
<div style="margin-bottom: 2px;">
<i><b><small>JUDUL SPOILER</small></b></i><input 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" style="font-size:
10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

MASUKKAN ISI YANG DIINGINKAN DI SINI

</div>
</div>

Copy kode di dalam tersebut untuk membuat Spoiler ini, silahkan terapkan dimana saja anda menginginkannya, misalnya seperti di area sidebar, footer atau artikel.

Keterangan kode :
JUDUL SPOILER : Silahkan ganti dengan text yang ingin anda munculkan
MASUKKAN ISI YANG DIINGINKAN DI SINI : Area text ini bisa anda isi dengan kode, gambar, atau apa saja yang ingin anda tampilkan ke dalam kolom tersebut.
Simpan dan lihat hasilnya. Selamat Mencoba membuat text area hide and show atau spoiler
Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :

Title : Membuat Text Area III (Hide and Show Atau Spoiler)
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2012/01/membuat-text-area-iii-hide-and-show.html

Related Post

0komentar:

Post a Comment

*Silahkan tinggalkan komentar, saran atau kritik sesuai topik untuk kemajuan blog ini.
*Komentar anda secepat mungkin direspon, karena saya tidak selalu online.
*KOMENTAR TIDAK SOPAN, BERIKLAN, VULGAR, MELECEHKAN, SARA atau PROVOKATIF akan dianggap SPAM, dan berakhir di Tong Sampah..!!!