Cara untuk Show, Hide, dan Toggle dengan jQuery

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!” >contoh’).hide(500);”></input>

<a href=”javascript:void(0)” >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 >contoh’).hide(500);” pada setiap elemen, misalnya pada tag DIV, P, TABLE, IMG.

contoh:

<div id=”contoh” >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

Andi Setiawan

Loving husband - Caring Father - Slap bet Commissionaire (I wish) find my complete profile on: http://andisetiawan.com/about-me http://facebook.com/andiim3 - http://gplus.to/andiim3 - http://andiim3.com

Share
Published by
Andi Setiawan

Recent Posts

Dedicated Blog for Dobby and Luna

Dobby and Luna have been part of our lives for the past years. They have…

2 years ago

Demo Site For My Projects

In the year 2021, I've completed some paid projects. Some of them are more technical,…

2 years ago

GlassTime – Glassmorphism WordPress Theme

Based on the GlassTime Bootstrap template, here I present glassmorphism WordPress Theme free to download.This…

3 years ago

GlassTime : Glassmorphism Responsive HTML5 Template

This HTML5 template is using Glassmorphism UI design language which is now trending for 2021…

3 years ago

Daftar Desa, Kecamatan, dan Kode Pos Buleleng – Bali

KecamatanKode POSBanjar81152Buleleng81119Busungbiu81154Gerokgak81155Kubutambahan81172Sawan81171Seririt81153Sukasada81161Tejakula81173Klik pada nama kecamatan untuk melihat daftar desa masing-masing. Sumber: kodepos.andiim3.com

3 years ago

Ninja diganti ADV

Ada yang bilang "semuanya akan mati matic pada akhirnya". Bener aja, sekarang tuntutan transportasi sehari-hari…

4 years ago

This website uses cookies.