Featured Post

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

Mungkin Kamu Juga Suka...

Comments

  1. perlu pembelajaran lagi nie.

    nice info gan

    ReplyDelete
  2. Trus gimana membuatnya gan? ane kurang paham

    ReplyDelete
    Replies
    1. copas aja kode yang ada di demonya gan :)

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

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

      Delete

Post a Comment