Tips Membuat Show Hide pada Widget / Text `

bagaimanakah cara membuat shhow hide pada text / tulisan , widget blog menggunakan javascript .. ?

di hari ini di blognya mastony akan membagikan tips untuk membuat show hide pada tulisan/ text , widget blog . menggunakan javascript .
lalu bagaimana dengan file gambar atau lainnya ?, Tentu saja bisa ! .Anda dapat menyembunyikan / membuat show hide menggunakan script javascript ID .
Langsung saja kita simak Tutorial mengenai Cara membuat show hide pada tulisan , gambar , widget blog . contoh :

Jika anda click disini maka text ini akan menghilang

click Tulisan atau paragraph di atas untuk menyembunyikan
hasil di atas seperti ini penulisannya :
<p onclick="this.style.visibility='hidden'" style="cursor:pointer;border:1px solid #ddd;">Jika anda click disini maka text ini akan menghilang </p>
Baiklah kita akan membuat navigasi buttonnya menggunakan input type="button" . contoh :

text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide

click button Hide di atas untuk menyembunyikan paragraph dan click button Show di atas untuk menampilkan paragraph
hasil daripada di atas seperti berikut ini penulisan script javascript beserta HTML nya .
<script>function hide_text(){var x=document.getElementById("HIDESHOW").style.visibility="hidden"} function show_text(){var x=document.getElementById("HIDESHOW").style.visibility="visible</script><input type="button" onclick="hide_text()" value="HIDE"/><input type="button" onclick="show_text()" value="SHOW"/><div id="HIDESHOW">text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide</div>

Lalu bagaimana caranya agar tidak nampak dan nampak ketika di click ,,?

yups , anda juga dapat untuk tidak menampakkan ( hide ) dan tampak (Show ) ketika di click dengan menambahkan style dan di teruskan dengan property visibility . contoh :

text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide

click button Hide di atas untuk menyembunyikan paragraph dan click button Show di atas untuk menampilkan paragraph

dan hasil dari script di atas beserta Html nya seperti ini penulisannya :
<script>function hide_text2(){var x=document.getElementById("HIDESHOW2").style.visibility="hidden"} function show_text2(){var x=document.getElementById("HIDESHOW2").style.visibility="visible"} </script><br /> <input type="button" onclick="hide_text2()" value="HIDE"/><br /> <input type="button" onclick="show_text2()" value="SHOW"/><br /> <div id="HIDESHOW2" style="visibility:hidden;">text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide text atau tulisan dengan show hide <br /> </div>
Anda juga dapat merubah javascript mouse event nya yaitu ketika di click atau di mouse over widget , text yang akan di buat show hide . contoh dengan mouse over :

mouseout button Hide di atas untuk menyembunyikan div dan mouseover button Show di atas untuk menampilkan div
dan hasil di atas seperti berikut ini penulisan javascript dan HTML nya :
<script>function hide_textOv(){var x=document.getElementById("HIDESHOWOV").style.visibility="hidden"} function show_textOv(){var x=document.getElementById("HIDESHOWOV").style.visibility="visible"}</script><br /> <input onmouseover="hide_textOv()" type="button" value="mouse out to hide" /><br /> <input onmouseover="show_textOv()" type="button" value="mouse over to show" /><br /> <div id="HIDESHOWOV" style="visibility: hidden;"><div style="background: yellow; height: 50px; width: 50px;"></div><div style="background: blue; height: 50px; width: 50px;"></div><div style="background: red; height: 50px; width: 50px;"></div><div style="background: green; height: 50px; width: 50px;"></div></div>

input type="button" onmouseover=javascript 

input type="button" onclick=javascript 

Membuat 1 Tombol untuk membuka dan menyembunyikan widget ..

contoh :

text / widget dengan show hide text / widget dengan show hide text / widget dengan show hide

hasil diatas seperti berikut ini penulisannya :
<div id="tab_menu"><button id="show" onclick="show()">SHOW</button><button id="hide" onclick="hide()" style="display: none;">HIDE</button></div><br /> <br /> <div id="shide">text / widget dengan show hide text / widget dengan show hide text / widget dengan show hide </div><script> function show(){var sh=document.getElementById("shide").style.display="block"; if(sh){document.getElementById("show").style.display="none"; document.getElementById("hide").style.display="block";}} function hide(){var hd=document.getElementById("shide").style.display="none"; if(hd){document.getElementById("show").style.display="block"; document.getElementById("hide").style.display="none";}} </script><br /> <style> #show,#hide{cursor:pointer;font-weight;bold;border:none;display:block;padding:5px;} #show:hover,#hide:hover{color:white;background:lightBlue;}#tab_menu{float:left;display:block;margin:10px;padding:0;} #shide{display:none;border:1px solid black;} </style><br />
nah gimana ?, oke saya rasa cukup disini pembahasan mengenai cara membuat show hide menggunakan javascript , dan smoga artikelnya membantu bagi sobat .

Terima kasih Anda telah membaca Artikel mengenai Tips Membuat Show Hide pada Widget / Text dan Kata kunci untuk Artikel ini yaitu Tips Membuat Show Hide pada Widget / Text