Membuat Efek Show dan Hide Dengan JQuery Toggle

JQuery Toggle digunakan untuk membuat efek show() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini:

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

Agar bisa lebih mudah dalam memahami penggunaan JQuery toggle ikutilah contoh di bawah ini. Pada contoh ini kita akan menyembunyikan dan menampilkan suatu elemen HTML.

CSS

#button{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#isi{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

HTML

<button id='button'>Toggle</button>
<div id='isi'>Penggunaan jQuery toggle</div> 

JQuery

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle();
  });
});

 Untuk melihat hasil dari script di atas klik link Contoh JQuery Toggle


Pada JQuery toggle ini kita bisa menambahkan parameter speed untuk membuat efek animasinya lebih terlihat.

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000); //parameter speed
  });
});

Menambahkan parameter Callback

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
});