Cara Buat Textarea Buka/Tutup

dede wandi    19.30    blog    1 comment   

Membuat Text Area Dengan Tombol Buka Tutup - Cara ini masih sama dengan artikel saya sebelumnya tentang Membuat tulisan Dengan TextArea, dan Textarea part2 Namun cara ini sedikit di modifikasi sehingga tampilannya akan sedikit menghemat ruang dalam postingan.

Untuk menyimpan text/tulisan atau kode pada postingan anda yang mungkin banyak kata, maka dengan adanya Text Area Dengan Tombol Buka Tutup akan sedikit membantu agar postingan anda tidak memanjang kebawah. Dengan adanya Tombol Buka Tutup pada text/tulisan yang kita kenal sebagai Kotak Spoiler dapat membantu untuk menyimpan text/tulisan atau kode HTML pada postingan anda hanya dalam 1 baris 1 kolom, dan hanya terbuka jika menekan tombol BUKA dan sebaliknya akan menutup jika menekan tombol TUTUP.

Berikut kode untuk Membuat Text Area Dengan Tombol Buka Tutup.
Pada postingan baru COPY lalu PASTE kode berikut pada halaman HTML

<@div style="margin-bottom: 2px;"> <@div style="margin-top: 5px; text-align: center;"> <@input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> <@/div> <@div style="border: 1px inset ; margin: 0px; padding: 6px;"> <@div style="display: none;"> MASUKKAN TEKS ANDA DISINI <@/div> <@/div> <@/div>

Hasilnya

MASUKKAN TEKS ANDA DISINI

Jangan Lupa Hapus tanda @