cara membuat tombol show dan hide (blog)

cara membuat tombol show dan hide (blog)

08.08
Cara membuatnya sangat mudah, anda hanya perlu mengcopy-paste script yang saya berikan, kemudian edit sesuai dengan keperluan anda.

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


Maka akan terlihat seperti ini,

JUDUL SPOILER



ISI NYA (Terserah anda)


Ataupun bisa seperti ini,




ISI NYA (Terserah anda)


Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode <i><b><small>JUDUL SPOILER</small></b></i> lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misal: width:100px;

0 Comment "cara membuat tombol show dan hide (blog)"

Posting Komentar

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Langganan: Posting Komentar (Atom)
Loading...