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 :)