Event toggle di jQuery – PT Proweb Indonesia

Event toogle di jQuery akan menimbulkan efek semacam on/off. Secara teknis pada saat klik pertama dia akan menjalankan function 1, saat klik kedua akan menjalankan function 2, setelah klik ketiga akan kembali menjalankan function 1, klik keempat menjalankan function 2 demikian seterusnya.

Misal kita mempunyai teks yang akan dibuat efek show/hide :
<div id=”kutipan”>
There is no one righteous, not even one;<br/>
there is no one who understands;<br/>
   there is no one who seeks God.<br/>
All have turned away,<br/>
   they have together become worthless;<br/>
there is no one who does good,<br/>
   not even one.
</div>

Kemudian kita tambahkan button untuk mengontrol show/hide :
<button id=”show_hide”>Show/Hide</button>

Terakhir kita tambahkan javascriptnya :
$(function(){
$(‘#show_hide’).toggle(

        function(){
            $(‘#kutipan’).addClass(‘sembunyi’);
        }


        ,function(){
            $(‘#kutipan’).removeClass(‘sembunyi’);
        }
    );
});

Coding secara utuh toggle.html adalah :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Toggle</title>

        function(){
            $(‘#kutipan’).addClass(‘sembunyi’);
        }


        ,function(){
            $(‘#kutipan’).removeClass(‘sembunyi’);
        }
    );
});
</script>
</head>
<body>
<button id=”show_hide”>Show/Hide</button>
<div id=”kutipan”>
There is no one righteous, not even one;<br/>
there is no one who understands;<br/>
   there is no one who seeks God.<br/>
All have turned away,<br/>
   they have together become worthless;<br/>
there is no one who does good,<br/>
   not even one.
</div>
</body>
</html>

Kemudian isi dari toggle.css adalah :
.sembunyi {
display: none;
}

Demo dapat dilihat di http://aris.proweb.asia/toggle.html dengan tampilan seperti berikut ini:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Event toggle di jQuery