20 Agt 2013

Cara Menampilkan/ Menyembunyikan DIV dengan jQuery

Terkadang dalam membuat situs, kamu akan menjumpai kasus di mana kamu ingin menyembunyikan sebuah DIV atau elemen HTML lainnya, lalu dengan mengeklik sebuah tombol, DIV yang tersembunyi itu muncul; atau sebaliknya. Teknologi CSS (hingga CSS3) untuk menangani hal ini tidak bisa, kecuali dimanipulasi sedemikian rupa. Itu adalah hal yang menyulitkan dan tidak efisien.

Hal yang paling lumrah dilakukan oleh web developer saat ini untuk menangani kasus ini adalah dengan menggunakan jQuery. Mengapa menggunakan jQuery? Bukankah dengan JavaScript biasa sudah bisa? Betul, dengan JavaScript biasa saja sudah mampu untuk menampilkan/menyembunyikan sebuah DIV. Hanya saja, kamu akan menemukan kesulitan nantinya jika banyak bagian di situs yang kamu bangun menggunakan fitur tampil/sembunyi ini.

jQuery memang datang dengan banyak kemudahan. Hampir sebagian besar situs yang ada saat ini, pasti menggunakan jQuery; entah itu jQuery, jQuery UI, maupun jQuery Mobile. Hingga saat ini, jQuery sudah sampai versi 1.10.2. Kamu bisa mengeceknya langsung di situs jQuery.com.

Cara Memasang jQuery

Cara memasang jQuery layaknya memasang JavaScript. Kamu hanya perlu memasang tautan ke jQuery yang kamu sediakan untuk situsmu. Biasanya jQuery langsung diambil dari situs resminya. Misalkan di bawah ini adalah tatanan kode situsmu, taruhlah jQuery di dalam tag HTML <head>. Berikut contohnya:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>

... isi body ...

</body>
</html>


Mudah bukan? Setelah itu hal yang perlu dilakukan adalah menggunakan jQuery dengan tepat.

Cara Menggunakan jQuery

Biasanya dalam menggunakan jQuery dimulai dengan <script> dan diakhiri dengan </script>. Untuk kasus kali ini, aku akan membuat DIV sederhana untuk mendemonstrasikan bagaimana cara menampilkan/menyembunyikan DIV dengan jQuery. Berikut ini adalah demo yang aku buat menggunakan editor online CodePen.

See the Pen pLBrJ by Iskandar Dzulkarnain (@iskael) on CodePen


Bagaimana mudah bukan? Berikut adalah penjelasan singkat mengenai demo yang aku buat.

.click()

Ini digunakan untuk event click. Apabila kamu mengeklik sebuah DIV lalu melakukan sebuah event, gunakan .click() ini.

.hide()

Ini digunakan untuk menyembunyikan element HTML.

.show()

Ini digunakan untuk menampilkan element HTML yang tersembunyi sebelumnya.

.toggle()

Ini digunakan untuk membalik keadaan. Misalkan dari sembunyi ke tampil, atau sebaliknya.

slow

Parameter slow digunakan untuk memberikan animasi pada transisi .hide() dan .show().

Mudah bukan? Semua akan terasa mudah jika kamu langsung mempraktikkannya :)

Bonus: Menampilkan/Menyembunyikan DIV menggunakan Slide

Berbeda dengan sebelumnya, kali ini aku mendemokan menggunakan slide, yaitu: slideUp (hide), slideDown(show), dan slideToggle(toggle).

See the Pen wHtmn by Iskandar Dzulkarnain (@iskael) on CodePen

6 komentar:

  1. perlu pembelajaran lagi nie.

    nice info gan

    BalasHapus
  2. Trus gimana membuatnya gan? ane kurang paham

    BalasHapus
    Balasan
    1. copas aja kode yang ada di demonya gan :)

      Hapus
  3. nice info,...!!! saya mau tanya
    jika sya ingin membuat 3 menu misalkan begini jika menu 1 diklik maka akan tampil elemen dri menu1 lalu ktika menu2 diklik menampilkan maka secara otomatis menu1 menutup? itu menggunakan apa ?

    BalasHapus
    Balasan
    1. itu istilahnya adalah "accordion"
      googling aja, pasti banyak tutorialnya
      menggunakan JavaScript juga, pake jQuery juga bisa

      Hapus

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia