Memahami jQuery Show Hide dan Cookie

Pada artikel sebelumnya Blogger Tune-Up membahas artikel tentang "Tampilkan Sembunyikan Isi dan Form Komentar". Pada artikel kali ini merupakan penjelasan script jQuery yang digunakan pada artikel tersebut. Bertahap untuk memahami fungsi-fungsi jQuery dengan memahami script-script sederhana. Mohon ma'af untuk para master jQuery, silahkan tinggalkan artikel ini jika dianggap tidak bermanfaat. Script jQuery Show Hide sebenarnya pernah dibahas dan disertakan pada beberapa tips trik jQuery, namun demikian tidak ada salahnya kita ungkap kembali mengenai penggunakan script tersebut, serta di tambahkan peranan Cookie dalam mengatur perilaku pengunjung pada terhadap tombol yang tersimpan pada Cookie browser.

Pada artikel kali ini kita akan menggunakan efek jQuery sederhana yaitu efek show, efek hide dan efek slide serta akan melibatkan sebuah plugin jQuery Cookie yang dibuat oleh Klaus Hartl (https://github.com/carhartl) yaitu sebuah plugin jQuery sederhana yang digunakan untuk membaca, menulis dan menghapus cookie dari browser.

Skenario HTML

Dibawah ini adalah kode HTML yang digunakan:

<b:includable id='comments' var='post'>

 <div class='comments' id='comments'>
 <!-- Berisi Kode Komentar dan Form Komentar -->
 </div>
 
 <button class='tombol black' id='bukakeun'>Click here for comment</button>
 <button class='tombol black' id='tutupkeun'>Click here for close</button>
 
</b:includable>

Keterangan Skenario HTML:

<div class='comments' id='comments'>
<!-- Berisi Kode Komentar dan Form Komentar -->
</div>

Kode diatas menggambarkan suatu kotak komentar yang memiliki identitas atau ID comments (id='comments'). comments ini berisi form komentar dan isi komentar yang akan ditampilkan (show) dan disembunyikan (hide) dengan menggunakan tombol yang telah disiapkan dibawahnya.

<button class='tombol black' id='bukakeun'>Click here for comment</button>
<button class='tombol black' id='tutupkeun'>Click here for close</button>

Tombol yang akan digunakan terdiri dari 2 tombol yaitu tombol dengan ID bukakeun (id='bukakeun') dan tombol dengan ID tutupkeun (id='tutupkeun'). Kedua tombol ini akan ditampilkan secara bergantian sesuai dengan keadaan cookie.

Skenario jQuery

Dibawah ini adalah kode jQuery yang digunakan:

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
 jQuery('#bukakeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({display: 'none'});
  jQuery('#tutupkeun').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#tutupkeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({display: 'none'});
  jQuery('#bukakeun').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#bukakeun').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#tutupkeun').hide()
 }
});
//]]></script>

Keterangan Skenario jQuery
Script ini digunakan untuk memanggil (load) framework jQuery, jika anda pernah memasang sebelumnya pada template maka script dibawah ini tidak perlu diikutsertakan. (Baca artikel Perpustakaan jQuery pada Blogger).

<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

Script dibawah ini digunakan untuk memanggil (load) plugin jQuery Cookie yang berfungsi untuk membaca, menulis dan menghapus cookie.

<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>

Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi JavaScript

<script type='text/javascript'>//<![CDATA[

Script ini untuk pendeklarasian bahwa kode setelah baris ini adalah fungsi jQuery

jQuery(document).ready(function () {

Jika tombol dengan id bukakeun (id='bukakeun') di klik maka fungsi dimulai...

jQuery('#bukakeun').click(function () {

Wadah (container) dengan id comments (id='comments') akan terbuka dengan efek slideToggle berdurasi lambat

jQuery('#comments').slideToggle('slow');

Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan

jQuery(this).css({display: 'none'});

Tombol dengan id tutupkeun (id='tutupkeun') akan ditampilkan

jQuery('#tutupkeun').show();

Plugin jQuery Cookie akan menuliskan cookie dengan nama 'komen' dengan nilai 1 pada browser menandakan bahwa kita melakukan klik pada tombol dengan id bukakeun (id='bukakeun')

jQuery.cookie('komen', 1);

Fungsi akan diulang jika mengalami kegagalan load

return false

Fungsi tombol dengan id bukakeun (id='bukakeun') ditutup

});

Keterangan : Sampai script diatas maka browser akan selalu menyimpan cookie dengan nama komen hingga waktu tidak tentu. Selama cookie pada browser dengan nama komen tersimpan maka isi komentar dan form komentar akan selalu terbuka walaupun pengunjung menutup browser atau berpindah halaman.

Jika tombol dengan id tutupkeun (id='tutupkeun') di klik maka fungsi dimulai...

jQuery('#tutupkeun').click(function () {

Wadah (container) dengan id comments (id='comments') akan tertutup dengan efek slideToggle berdurasi lambat

jQuery('#comments').slideToggle('slow');

Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan

jQuery(this).css({display: 'none'});

Tombol dengan id bukakeun (id='bukakeun') akan ditampilkan

jQuery('#bukakeun').show();

Plugin jQuery Cookie akan menghapus cookie dengan nama 'komen' dengan nilai null (kosong) pada browser menandakan bahwa kita melakukan klik pada tombol dengan id tutupkeun (id='tutupkeun')

jQuery.cookie('komen', null);

Fungsi akan diulang jika mengalami kegagalan load

return false

Fungsi tombol dengan id tutupkeun (id='tutupkeun') ditutup

});

Keterangan : Sampai script diatas maka browser sudah menghapus cookie dengan nama komen hingga waktu tidak tentu. Jika cookie pada browser dengan nama komen sudah dihapus maka isi komentar dan form komentar akan selalu tertutup walaupun pengunjung menutup browser atau berpindah halaman.

Kumpulan script dibawah ini digunakan untuk memeriksa keberadaan cookie pada Browser, apakah tersedia atau tidak.
Jika jQuery Cookie menemukan cookie pada browser dengan nama komen dan tersedia maka...

if (jQuery.cookie('komen') == 1) {

Wadah (container) dengan id comments (id='comments') akan terbuka dan...

jQuery('#comments').show();

Tombol dengan id bukakeun (id='bukakeun') akan disembunyikan

jQuery('#bukakeun').hide()

Jika browser tidak memiliki cookie dengan nama komen maka...

} else {

Wadah (container) dengan id comments (id='comments') akan tertutup dan...

jQuery('#comments').hide();

Tombol dengan id tutupkeun (id='tutupkeun') akan disembunyikan

jQuery('#tutupkeun').hide()

Fungsi periksa cookie ditutup

}

Pendeklarasian fungsi jQuery di tutup

});

Pendeklarasian fungsi JavaScript di tutup

//]]></script>

Mudah-mudahan artikel diatas bermanfaat dan silahkan dikembangkan sesuai dengan imajinasi anda. Happy Blogging... :)

Catatan kaki:

• jQuery .show()
• jQuery .hide()
• jQuery .slideToggle()
• jQuery Cookie