Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah jquery-1.10.2. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode </head> atau bisa juga di atas </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut.

Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property display:none, bukan visibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode toggle(), fadeToggle() ataupun slideToggle().

Penggunaan 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)

Contoh:

Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini:

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

<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>

Default

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle();
  });
});

Edit & Demo

Dengan menambahkan parameter speed

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000);
  });
});

Edit & Demo

Dengan menambahkan parameter callback

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

Edit & Demo

Penggunaan jQuery fadeToggle

Metode fadeToggle() digunakan untuk memunculkan efek fadeIn() dan fadeOut() pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini:

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

Contoh:

Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode toggle().

#bton1{
padding:5px 15px;
background:#D94839;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#gambar{
display:none;
text-align:center;
padding:10px;
background:#E74C3C;
border:5px solid #fff
}
#gambar img{
width:300px;
height:200px;
border:5px solid #fff
}

<button id='bton1'>fadeToggle</button>
<div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirV8-KL31bT8auzaaJUaX7xUrE6z011tfqMRue9g-EClPkI5uDbhPxJIHx3AGJPLsxRj4_dg6r_A4UyRPPRzWouSFEjJuISrX-YqT4zZjsQHRtZqgmZDlLOzq1DLXH5c-Yu4TqmDJXlSs/h200/Paramore+%287%29.jpg"/></div>

$(document).ready(function(){
  $("#bton1").click(function(){
    $("#gambar").fadeToggle();
  });
});

Edit & Demo

Penggunaan jQuery slideToggle

Fungsinya sama seperti metode toggle() dan fadeToggle(), hanya saja efeknya yang berbeda. Metode slideToggle() digunakan untuk membuat efek slideDown() dan slideUp(). Syntax yang digunakan seperti dibawah ini:

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

Contoh:

Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini:

#buton1{
padding:5px 15px;
background:#D94839;
color:#fff;
cursor:pointer;
display:inline-block
}
#contoh2{
display:none;
text-align:center;
background:#E74C3C;
color:#fff;
padding:50px 0
}

<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>

Default

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle();
  });
});

Edit & Demo

Dengan Menambahkan parameter speed

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000);
  });
});

Edit & Demo

Dengan Menambahkan parameter callback

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000,function(){
      alert("Pesan ini muncul setelah slideToggle selesai berjalan");
    });
  });
});

Edit & Demo

Konfigurasi:

Parameter	Deskripsi
speed	Opsional. Untuk menentukan kecepatan efek. Value: milidetik (contoh: 1000, 2000, dst). "slow" "fast"
easing	Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value: "swing" bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah. "linear" bergerak dalam kecepatan konstan.
callback	Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan.