pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide..
<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>
<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
Ataupun bisa seperti ini,
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;
Selamat Mencoba.
0 comments:
Post a Comment