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??

  • Taufik Nurrohman

    @Bayu Handono Bisa:

    $('.sentuh').hover(function() {
    $('#target').hide('slow');
    }, function() {
    $('#target').show('slow');
    });

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

  • Bayu Handono

    @Taufik Nurrohman sip2 sudah bisa mas :)

  • Ohim

    @Taufik Nurrohman
    penempatan jQueerynya dimana suhu?

  • 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

  • Unknown

    Misi Mas, Mau tanya?
    ada g yah CSS Spoiler yang buka / tutupnya dengan effect mouse -over

    makasih mas

  • 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.