JavaScript untuk Menyembunyikan Konten

Mengangkat kembali topic trick seputar hide is sembunyi ala bloglang! Pada pembahasan sebelumnya sudah Koben sharing is care beberapa cara menyembunyikan sesuatu dengan trick in the pret full stylish :D Tidak jauh² dari itu, pada kesempatan malas ini gue akan kembali berbagi lagi dengan tema serupa hide show.
Karena sangkin banyaknya trick sembunyi²an ini, timbul satu pertanyaan mau pakai yang mana? Cerdiknya ya...satu bumbu namun bisa dipakai di setiap keadaan ;) Dengan bantuan sedikit sentuhan JavaScript, teknik menulis inline style, maka terjawab sudah masalah persembunyian. Kinerjanya mirip dengan yg saya pakai pada blog ini yaitu dengan teknik collapse/expand [+/-] Contoh: Click to expand here

Untuk sobatku tercinta akan Koben kasih dengan tehnik cukup menyorot link (bukan klik) maka akan terlihat apa yg tersembunyi ;)
Masukan Javascript sebelum tagging </head> atau bisa juga dicoba diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
function showBox (is){
document.getElementById(is).style.display="block";
}
function hideBox (is)
{
document.getElementById(is).style.display="none";
}
//]]>
</script>

Beres deh. Sudah tertanam sekarang senjata menyembunyikan konten di blog kalian ;;) Pemakaiannya yg harus sedikit membutuhkan ketelitian! Karena menggunakan attribute ID (unik ID) maka jika mau memakai lebih dari satu, harus berbeda ID-nya ;) Apalagi tidak memakai id, ya tidak akan jalan nantinya sob =))
Begini syntax penulisannya<a href="javascript:void(0)" onMouseOver="showBox ('UNIQUE-ID');">YOUR TITLE</a>

<div id="UNIQUE-ID" style="display:none;">

<a href="javascript:hideBox ('UNIQUE-ID')" style="color:#f00;font-weight: bold;float: right">X</a>
<br />

KONTENT YANG AKAN DISEMBUNYIKAN, TARUHNYA DISINI

</div>Kode style="" pada CSS merupakan gaya inline, yg mana bisa kalian tambahkan variabelnya sesuka hati :P
UNIQUE-ID <--- Satu penulisan syntax terdapat 3x pengulangan UNIQUE-ID! Untuk 2x, 3x, ... harus beda itunya entuh...mengerti kan :) Contoh:

<a href="javascript:void(0)" onMouseOver="showBox ('pocong');">YOUR TITLE</a>

<div id="pocong" style="display:none;">

<a href="javascript:hideBox ('pocong')" style="color:#f00;font-weight: bold;float: right">X</a>
<br />

KONTENT YANG AKAN DISEMBUNYIKAN, TARUHNYA DISINI

</div>

<a href="javascript:void(0)" onMouseOver="showBox ('kunti');">YOUR TITLE</a>

<div id="kunti" style="display:none;">

<a href="javascript:hideBox ('kunti')" style="color:#f00;font-weight: bold;float: right">X</a>
<br />

KONTENT YANG AKAN DISEMBUNYIKAN, TARUHNYA DISINI

</div>

Demo

http://jsbin.com/oxupit

Good luck :)
Happy coding \m/