Cara untuk Show, Hide, dan Toggle dengan jQuery | andi setiawan's blog

Iseng-iseng mau bikin update, tapi ga ada ide. Jadi bikin tutorial simple aja.

Ini adalah tutorial untuk menyembunyikan (hide), menampilkan (show), dan toggle sebuah elemen dengan javascript, menggunakan jQuery Library.

Yang perlu dilakukan pertama adalah menambahkan jQuery pada bagian <head> setiap halaman yang ingin diisi effect nya.

contoh :

<head>
        <script type=”text/javascript” src=”jquery.js”></script>
        <!—atau –>
        <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
</head>

Setelah jQuery active, kita tinggal menentukan DIV, class, atau sebuah element yang akan menjadi sasaran. Dan juga menentukan effect yang akan dipakai, apakah itu hide(), show(), atau toggle().

Misalnya kali ini kita akan menyembunyikan DIV dengan ID contoh:

<div id=”contoh”>
Ini adalah text di dalam DIV dengan ID contoh
</div>

Lalu kita membuat tombol atau link yang akan berisi function javascript:

<input type=”button” value=”hide it!” onclick=”$(‘#contoh’).hide(500);”></input>

<a href=”javascript:void(0)” onclick=”$(‘#contoh’).hide(500);”>hide it!</a>

hide(500) akan membuat proses hide/ proses menyembunyikan DIV contoh akan memakan waktu 500ms/0.5 detik. Dengan kata lain, hide(500) akan menampilkan animasi. Kalau anda tidak ingin animasi, bisa memakai hide() (tanpa angka di dalam tanda kurung).

Sebenarnya tidak cuma tergantung pada link atau button untuk trigger effect nya. Kita juga bisa menyisipkan onclick=”$(‘#contoh’).hide(500);” pada setiap elemen, misalnya pada tag DIV, P, TABLE, IMG.

contoh:

<div id=”contoh” onclick=”$(‘#contoh’).hide(2000);> kalau saya di-klik, saya akan bersembunyi….</div>

kalau saya di-klik, saya akan bersembunyi….

Untuk contoh lengkapnya, lihat di bawah:

Saya adalah contoh no 1, saya akan disembunyikan, di tampilkan, dan di-toggle dengan tombol dan link di bawah paragraph ini

| Tampilkan | Sembunyikan/tampilkan


Posted in Uncategorized |

1 thought on “Cara untuk Show, Hide, dan Toggle dengan jQuery

Leave a Reply to lulu Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: