Dengan menggunakan function toggle yang ada di jQuery kita mudah melakukan show dan hide suatu div.

Misalnya kita mempunyai div seperti di bawah ini:
<div id=”kutipan”>
The LORD bless you   and keep you,<br/>
the LORD make his face shine on you  and be gracious to you,<br/>
the LORD turn his face toward you and give you peace.
</div>

Maka function untuk show/hidenya adalah:
        $(‘#kutipan’).toggle();

Kemudian kalau dihubungkan dengan event click pada suatu button maka scriptnya menjadi:
    $(‘#show_hide’).bind(‘click’,function(){
        $(‘#kutipan’).toggle();
    });

Susunan program lengkapnya adalah:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Show/Hide dengan Toggle</title>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>

<script>
$(function(){
    $(‘#show_hide’).bind(‘click’,function(){
        $(‘#kutipan’).toggle();
    });
});
</script>

</head>
<body>
<button id=”show_hide”>Show/Hide</button>
<div id=”kutipan”>
The LORD bless you   and keep you,<br/>
the LORD make his face shine on you  and be gracious to you,<br/>
the LORD turn his face toward you and give you peace.
</div>
<hr/>
By Proweb Indonesia
</body>
</html>

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

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

Show/hide mudah dengan toggle jQuery