Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Toggle, fadeToggle dan slideTogglePenggunaan 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();
  });
});
Dengan menambahkan parameter speed
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000);
  });
});
Dengan menambahkan parameter callback
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
});

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://lh5.googleusercontent.com/-GrCwm5JQFXA/Uu-0woyX9EI/AAAAAAAAG3M/aZMhpJlAU3M/h200/Paramore+%287%29.jpg"/></div>
$(document).ready(function(){
  $("#bton1").click(function(){
    $("#gambar").fadeToggle();
  });
});

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();
  });
});
Dengan Menambahkan parameter speed
$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000);
  });
});
Dengan Menambahkan parameter callback
$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000,function(){
      alert("Pesan ini muncul setelah slideToggle selesai berjalan");
    });
  });
});

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.

Berlangganan artikel via email

32 Response to "Penggunaan jQuery Toggle, fadeToggle dan slideToggle"

Selamat malam Mas Andes keren unik dan menarik sagala gala deh
Buat Effects load blog bisa gak Mas? tapi ini tampilan DEMO nya
Koq tampilanya itu saja gak ada jenis yang lain Mas?

Balas

Woww asyik deh dapat Pertamax di artikel
Kerenya Mas Andes, sukses terus yah Mas Andes :)

Balas

yang saya share script dasar penggunaan efeknya kang, dihalaman demo sebelah kiri ada script sebelah kanan outputnya itu di klik. sekedar dasar pengunaannya.. buat pemahaman saja. kalo udah tau fungsinya nanti bisa buat custom widget, dll.

Balas

langsung ke lokasi master mas andes,,hehehe..ijin praktek

Balas

waleer... gak capek ya mas nulisnya. salut deh :)

Balas

Penggunaan toggle ini kayaknya lebih pas lagi untuk alert atau sejenisnya

Balas

maaf mas Andes OOT nih hehe, bisa inbox saya nggk soalnya contact form nya gk beerjalan normal. Saya ada sesuatu hal yang mungkin mas Andes bisa bantu :)

Balas

selamat pagi mas andes...sudah lama rasanya saya ndak berkunjung kesini hehe..
saya ikut menyimak saja nih agak kurang mudeng hehe

Balas

saya pelajari dulu mas andes

Balas

js widget jangan di matikan mas ganti kode&lt;!--</body>--&gt;&lt;/body&gt; dengan kode </body>

Balas

Saya uda coba mas buat membungkus widget pada footer...dan hasilnya juga wooow lumayan buat hemat halaman hehehe toooos dulu aaah

Balas

hampir mirip semacam widget buka tutup ya mas. Asyik juga ya kayaknya bisa hemat space di blog kita kalau kasih efek togel ini :)

Balas

Simak lagi Mas Andes agar saya lebih memahami jquery togle ini
Terima kasih atas artikelnya salam sejahtera selalu :)

Balas

ikutan nyimak Kang :) wah pasti cape yah ketik-nya wkwkwk :)

Balas

mantap ni belajar program pake ini..
tapi buat sy terlalu rumit ni gan..
semoga agan sukses dengan javascript ya..
trims

Balas
avatar
Anonymous

wenak tapi mas bikin posting cara membuat template dong
www.eko48.blogspot.com

Balas

Mas andes mau tanya nih ! di blog saya jika menggunakan slidetoggle/toggle, apabila masih loading browsernya jalan togglenya tapi ketika ketika loading nya beres , ga jalan ! knpa ya?

sprti dsini deris10.blogspot.com/2014/02/testing_20.html

Balas

coba kodenya jQuery taruh di atas </head> mas

Balas

sudah di coba mas, tapi hasilya sama .. apa bisa ada yg bentrok!

Balas

coba kalo versi jquery diganti pake yang terbaru diatas mas, kode ini<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> ganti dengan kode ini, tapi taruh di atas </body> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
dan ini taruh dibwahnya <script type='text/javascript'>
$(document).ready(function(){
$("#buton1").click(function(){
$("#contoh2").slideToggle(1000);
});
});
</script>

kalo masih juga tidak bisa coba di template lain

Balas

keren sob, nyimak tutornya

Balas

bagaimana kalo buat beberapa togel dalam satu widget, misal membuat bentuk : pertanyaan 1 terus ada jawabannya selanjutnya pertanyaan 2 ada jawabannya dan seterusnya.

Balas

artikelnya keren tapi sayang, sayany sulit mencernanya haha :D
salut deh ama mas ! sukses selalu

Balas

untuk mengubah menjadi horizontal gimana ya mas?

Balas

kodenya banyak sekali gan

Balas

Pagi mas andes, thank's untuk tutorialnya.. berbagi ya.

Balas

thanks gan manfaat banget

Balas

makasih mas andes, saya dapat ilmu banyak disini

Balas

kodenya banyak banget ya

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Penggunaan jQuery Toggle, fadeToggle dan slideToggle" ini bermanfaat, share ke jejaring sosial.
Konversi Kode