Selasa, 28 Agustus 2012

membuat spoiler show hide seperti di kaskus

seperti postingan sebelumnya tentang cara membuat spoiler di blogspot dengan benar, maka di blog edisi.blogspot.com kali ini saya akan mencoba membuat spoiler yang biasanya sering digunakan kaskuser seperti contoh dibawah ini:


<br />
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> for <i>title</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: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #E1E4F2; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Yg ingin ditulis silahkan isi disini
</div>
</div>
</div>


dan hasilnya akan seperti ini:
Spoiler for title :
Yg ingin ditulis silahkan isi disini
semoga srtikel cara membuat spoiler show hide mirip kaskuser ini bermanfaat..

1 komentar: