Efek jQuery : Hide dan Show – Kode dan Contohnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 29, 2020

Berikut ini beberapa efek jQuery : Hide, Show, Toggle, Slide, Fade, dan Animate. WOW!

jQuery hide() dan show()

Dengan jQuery, kita bisa menyembunyikan dan menampilkan elemen HTML dengan metode hide() dan show():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>

<p>Jika klik "hide", maka text ini akan hilang dan jika klik "show", maka text ini akan tampil.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

Sintaks:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Parameter kecepatan opsional menentukan kecepatan menyembunyikan / menampilkan dan dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah metode hide() atau show() selesai.

Contoh berikut menunjukkan parameter kecepatan dengan hide():

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>

<button>Hide</button>

<p> Ini adalah paragraf dengan sedikit konten. </p>
<p> Ini adalah paragraf kecil lainnya. </p>

</body>
</html>

jQuery toggle ()

jQuery juga bisa beralih antara menyembunyikan dan menampilkan elemen dengan metode toggle().

Elemen yang ditampilkan disembunyikan dan elemen tersembunyi ditampilkan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button> Tombol beralih menyembunyikan dan menampilkan </button>

<p> Ini adalah paragraf dengan sedikit konten. </p>
<p> Ini adalah paragraf kecil lainnya. </p>

</body>
</html>

Sintaks:

$(selector).toggle(speed,callback);

Parameter kecepatan opsional dapat mengambil nilai berikut: “lambat”, “cepat”, atau milidetik.

Parameter callback opsional adalah fungsi yang akan dijalankan setelah toggle() selesai.