Sunday, March 6, 2011

Bikin tampilan spoiler pada website kita

Anda pernah windows shooping di Kaskus? Mungkin anda pernah melihat iklan yang disembunyikan dalam spoiler.. Sehingga informasi yang ada didalamnya dapat disembunyikan/ditampilkan. Keuntungannya adalah beban loading bisa dikurangi. Tertarik untuk menirunya? Berikut ini adalah kode htmlnya

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat'; }" name="button" type="button" value="Lihat" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">
Pesan anda
</p>
</div><div id="hide"></div></div></div>



No comments:

Post a Comment