Siapa yang tidak tahu dengan istilah toggle ? dalam sebuah bahasa client-script atau jQuery biasa disebut dengan efek show atau hide yang merupakan sebuah tombol yang berfungsi sebagai efek menampilkan ataupun menyembunyikan suatu elemen. Dalam kasus ini saya akan ajarkan kalian bagaimana Cara Membuat Slide Toggle dengan jQuery. Dalam pembuatan nya kita akan menggunakan sebuah fungsi dari jQuery yakni menggunakan metode slideToggle(). Metode slideToggle merupakan sebuah metode yang berfungsi sebagai efek slideDown dan slideUp.Adapun sintak nya adalah sebagai berikut.

Penjelasan :

1. speed

Untuk menentukan kecepatan efek nya.

Contoh nilai kecepatan :

  • milidentik (1000, 2000, 3000, dst).
  • Slow
  • Fast

2. easing

Untuk menentukan kecepata suatu animasi dan nilai default nya adalah swing.

Contoh nilai :

  • swing
  • liniear

3. callback

Berfungsi untuk mengeksekusi toggle(), fadeToggle() ataupun slideToggle() setelah selesai berjalan.

Baik sekarang kita akan contohkan kasus untuk membuat slide toggle. Buat sebuah file HTML kemudian ketikan sintak HTML berikut.

Pada bagian kode id content silahkan kalian isikan satu buah paragraf bebas. Kemudian kita akan memberikan style pada masing-masing id yang telah kita buat yakni id = toggle dan id content, berikut sintak CSS3 untuk memberikan stylr nya.

Pada sintak diatas masing-masing id telah diberikan ukuran dan warna supaya terlihat lebih jelas pada perubahan silde nya. Selanjutnya setelah sintak CSS3 diketikan selanjutnya adalah membuat animasi Slide Toggle dengan jQuery, berikut sintak jQuery nya.

Pada kode :

Telah diberikan nilai speed untuk kecepatan slide nya yakni 1000, silahkan kalian untuk mencoba memberikan nilai yang berbeda untuk melihat apa perbedaan nya. Setelah semua sintak diketikan selanjut nya kalian wajib menuliskan library js berikut supaya toggle slide bisa berjalan dengan baik pada browser.

Setelah semua sintak diatas diketikan semua, selanjutnya kalian jalankan pada browser masing-masing dan lihat hasilnya. Selesai

Baiklah itu tadi pembahasan mengenai Cara Membuat Slide Toggle dengan jQuery. Semoga bermanfaat 🙂

DEMO