Show and Hide Element with JS

Pada dasarnya Script ini ngatur Style dari sebuah Element.

Ada banyak cara buat ngumpetin (Hide) sebuah element, diantaranya..
display:none

misal kita punya satu element div
dengan id="buat-makan-siang"

<div id="buat-makan-siang" style="background-color:skyblue; height:100px; width:100px; margin:auto;"></div>

Kita punya satu tombol dengan perintah Hide..
<a href="javascript:void(0)" onClick="document.getElementById('buat-makan-siang').style.display='none'; this.style.display='none'">Hide</a>
Hide <== monggo coba diClick..

Untuk yang lebih complex..
<a href="javascript:void(0)" onClick="if(document.getElementById('buat-makan-siang').style.display=='none'){document.getElementById('buat-makan-siang').style.display='block'; this.innerHTML='Hide'}else{document.getElementById('buat-makan-siang').style.display='none'; this.innerHTML='Show'}">Show/Hide</a>
Show/Hide <== monggo coba diClick..

Silahkan diCoba² dengan..
visibility:hidden
style.visibility='hidden'
visibility:visible
style.visibility='visible'   ...








Semoga Tidak BerhasiL...
Mari Berkomentar
 
© Copryght C2: Show and Hide Element with JS Edited by System Of Blog