Mecha versi 2.6.4 sudah dirilis!

JQuery .show(), .hide() dan .toggle()

Tabel Konten
  1. Penulisan Secara Umum 
  2. Contoh Penerapan Efek .show() dan .hide() 
    1. Kerangka 
    2. CSS 
    3. Deklarasi JQuery 
  3. Contoh Penerapan Efek .toggle() 
    1. Kerangka 
    2. CSS 
    3. Deklarasi JQuery 
jquery toggle show hide

.show() digunakan untuk mengubah objek yang tersembunyi menjadi muncul.
.hide() digunakan untuk menyembunyikan objek.
.toggle() merupakan gabungan antara efek .show() dan .hide(). Jadi, saat elemen sedang muncul, maka .toggle() bertugas untuk menyembunyikannya, sedangkan saat elemen sedang menghilang, maka .toggle() bertugas untuk menampilkannya.

Penulisan Secara Umum 

$(sasaran).show(durasi);
$(sasaran).hide(durasi);
$(sasaran).toggle(durasi);

Sasaran: adalah objek yang akan dikenai perintah
Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'.

Contoh Penerapan Efek .show() dan .hide() 

Kita buat dua buah tombol dan sebuah area target. Tombol yang pertama berfungsi untuk menyembunyikan elemen, sedangkan tombol yang ke dua berfungsi untuk memunculkan elemen:

Kerangka 

<button class='hilang'>Hilang!</button>
<button class='muncul'>Muncul!</button>
<div id='target'>
    <!-- Konten di Sini -->
</div>

CSS 

#target {
  background:#9D0053;
  width:190px;
  height:160px;
  padding:5px;
}

Deklarasi JQuery 

$(document).ready(function() {
    $('.muncul').click(function() {
        $('#target').show(500);
    });
    $('.hilang').click(function() {
        $('#target').hide(500);
    });
});

Contoh Penerapan Efek .toggle() 

Kita buat sebuah tombol dan sebuah area target. Tombol yang kita buat digunakan untuk membuka dan menutup target:

Kerangka 

<button class='bukatutup'>Buka/Tutup</button>
<div id='target'>
    <!-- Konten di Sini -->
</div>

CSS 

#target {
  background:#9D0053;
  width:190px;
  height:160px;
  margin-top:10px;
  padding:5px;
}

Deklarasi JQuery 

$(document).ready(function() {
    $('.bukatutup').click(function() {
        $('#target').toggle(500);
    });
});

Coba Sendiri

24 Komentar

Unknown

Wah Tambahain Lebih Banyak Lagi, gan tutor jquery nya, soalnya pengen belajar jquery lebih banyak

ageng

kalo hide dulu baru show yg di "buka/tutup" tuh gimana ya?

artinya kalo kita mau membuka halaman dan ada menu "buka/tutup" seperti itu. kita tidak bisa melihat konten yang ada di dalamnya. kita bisa melihatnya kalo kliki "buka/tutup" dulu.

mohon penjelasannya
rexcarnation@gmail.com

makasih.. :)

Taufik Nurrohman

@Rexcarnation: Tambahkan display:none pada elemen yang akan dihilangkan pada awal pembukaan halaman. Misalnya, untuk menghilangkan elemen #target saat pertama dilihat adalah seperti ini:

#target {
...
...
...
display:none;
}

Atau bisa juga menggunakan fungsi .hide() untuk menghilangkan elemen pada saat awal halaman diakses seperti ini:

$('#target').hide();
$('.bukatutup').click(function() {
$('#target').toggle(500);
});

ageng

@Taufik Nurrohman :
Terima kasih banyak gan.. its work..

Putra

@Taufik Nurrohman ikutan nggabung boleh yah :D sekalian belajar..
udah saya coba kalo saya pakai .hide() dijequerynya malah error, tapi kalau pake css display:none malah normal
kok bisa begitu yah??

Unknown

sediakan versi buat di downloadnya dong gan.. plizzz

Bayu Handono

kalo fungsi clicknya diganti sama fungsi hover bisa ga mas??

Unknown

mas mau nanya kalau tombol muncul/hilang itu bisa dibikin jadi satu gak

ketika kita buka muncul otomatis button berganti ke tulisan tutup dan begitu jga sebaliknya
makasih mas

Taufik Nurrohman

Untuk kasus ini lebih baik gunakan event .toggle() dan juga manipulasi .text() untuk mengganti label tombol secara bergantian:

$('button').toggle(function() {
$(this).text('Tutup!');
$('#panel').slideDown();
}, function() {
$(this).text('Buka!');
$('#panel').slideUp();
});

Demo: http://jsfiddle.net/tovic/EwNRJ/217/

Bang Randy

kalau yang mesti didrag itu gmana bang?

Taufik Nurrohman

?????

Bang Randy

ituloh mesti kita geser tekan mouse dulu baru dia muncul, oh ya koq yang efek slide up itu gak jalan ya di blog aq?
niy blog q omaresep.blogspot.com

Bang Randy

oya bang blognya masih q rahasiain hehe email abang apa tar aq add dulu biar bisa liat

azewBz

mas setelah saya membuat overlay ko ga muncul ya?
ini contohnya :

[url=http://jsfiddle.net/azewbz/cuhyqtxd/[/url]

azewBz

akhirnya sya naya lgi. oh iya ini mas pda bagian gambar buka/tutup, saya ubah dengan fonts dri fortawesome pda bagian buka bisa tpi pas bagian tutup emang tampil cuman tidk berfungsi. pdhal saya udh coba utak atik.

Komentar telah ditutup.