Cara menggunakan click hidden button javascript

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 javascriptbesertaHTMLnya .

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

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 :

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

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 :

input type="button" onmouseover=javascript

input type="button" onclick=javascript

Membuat 1 Tombol untuk membuka dan menyembunyikan widget ..

contoh :

SHOWHIDE

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

hasil diatas seperti berikut ini penulisannya :

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

Selain efek-efek dasar JavaScript, seperti menambahkan elemen atau memanipulasi kode CSS, jQuery juga menyediakan berbagai efek visual menarik lainnya. Kali ini kita akan membahas Cara Membuat Efek Show dan Hide elemen HTML dengan jQuery.

Membuat Efek Show dan Hide dengan jQuery

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan. Untuk membuat kedua efek ini kita bisa menggunakan method show() dan hide() jQuery.

Langsung saja kita masuk ke dalam contoh praktek dari kedua method ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_hide").click(function() {
       $("#box").hide();
     })
 
     $("#tombol_show").click(function() {
       $("#box").show();
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

Disini saya memiliki sebuah box <div id=”box”> yang sudah dihiasi dengan CSS. Ketika tombol Hide di klik, akan dijalankan perintah: $(“#box”).hide(). Akibatnya, kotak pink hilang, ketika tombol Show di klik, perintah $(“#box”).show() akan mengembalikan lagi kotak tersebut.

Silahkan anda coba sendiri dari link codepen dibawah ini:

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Tapi tunggu dulu, kenapa efeknya cepat sekali?

jQuery juga mengizinkan kita untuk mengatur kecepatan animasi efek show() dan hide(). Caranya dengan menambahkan salah satu keyword: “slow” atau “fast” sebagai argumen method ini, seperti contoh berikut:

$("#box").hide("slow");

Untuk pengaturan yang lebih detail, kita bisa menginput angka dalam satuan milisecond, seperti:

$("#box").hide(1000);

Ini artinya efek hide akan membutuhkan waktu 1 detik (1000 milisecond) untuk selesai. Berikut contoh perubahannya pada kode program sebelumnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_hide").click(function() {
       $("#box").hide(1000);
     })
 
     $("#tombol_show").click(function() {
       $("#box").show(1000);
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Sekarang, efek hide dan show berjalan dengan lebih pelan.

Dapat juga anda perhatikan bahwa efek hide() ini dijalankan dengan cara menyembunyikan element HTML ke sudut kiri atas.

Method toggle() jQuery

Selain method hide() dan show(), jQuery masih memiliki method toggle() yang berfungsi sebagai gabungan efek hide dan show. Method ini akan menyembunyikan (hide) element HTML jika saat ini sedang muncul, atau memunculkan (show) element tersebut jika saat ini tersembunyi.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       $("#box").toggle("slow");
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol">Hide/Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 3 by duniailkom (@duniailkom) on CodePen.10206

Silahkan anda klik tombol Hide/Show, kotak box akan bergantian dari hide ke show dan sebaliknya.

Masih berhubungan dengan efek jQuery, dalam tutorial berikutnya kita akan mempelajari Cara Membuat Efek Fade untuk elemen HTML menggunakan jQuery.