Show Hide Div Berdasar ID atau CLASS Menggunakan JQuery

Dalam dunia pemrograman website, seorang programmer dituntut untuk mengerti paling tidak dua bahasa pemrograman yaitu client side scripting dan server side scripting. keduanya sangat diperlukan untuk menjadikan aplikasi website menjadi lebih interaktif. Untuk client side scripting yang banyak digunakan oleh programmer adalah Javascript.

Saya ingin mengajak teman-teman untuk melihat contoh kasus website yang dibangun murni menggunakan bahasa server side (PHP/JSP/ASP) atau penggabungan server side dan client side. Untuk membedakannya mudah saja. Untuk website yang murni menggunakan pemrograman server side, akan memerlukan reload/refresh halaman untuk melakukan setiap aksinya, seperti pemrosesan data jika button simpan diklik dan semacamnya. berbeda dengan website yang dibangun dengan  menggabungkan pemrograman server side dan client side scripting. Pemrosesan data tanpa melakukan refresh halaman sangat mungkin dilakukan. Maka dari itu, saya tertarik untuk membahas bagaimana menyembunyikan dan memunculkan div menggunakan Jquery karena hal ini tidak pernah lepas guna menjadikan website yang kita bangun menjadi lebih interaktif.

Show Hide Div Berdasar ID atau CLASS Menggunakan JQuery

JQuery adalah library javascript yang dapat digunakan untuk menangani event handling, animasi dan manipulasi element HTML, pemrosesan data pada database menggunakan dapat menggunakan JQuery AJAX dan tentu saja tanpa refresh halaman. Disini saya akan mencontohkan penggunaan JQuery untuk menyembunyikan (hide) Div berdasarkan ID atau class nya serta bagaimana memunculkannya. Sebagai contoh berikut adalah coding sederhana untuk menghilangkan dan memunculkan DIV atau tag html lain berdasarkan ID atau classnya.

<html>
<head>
 <title>Show Hide DIV</title>
 <!-- 1. Meload JQuery -->
 <script src="jquery.js" type="text/javascript"></script>
</head>
 
 <!-- 2. Element HTML yang akan dipanggil menggunakan ID dan CLASS -->
 
 <input type="button" value="Hilangkan" id="hilangkan">
 <input type="button" value="Munculkan" class="munculkan">
 
 <div id="hilang">
  <p>Ini akan hilang jika anda mengklik tombol hilangkan di bawah dan akan muncul kembali
     jika anda mengklik tombol munculkan dibawah ini </p>
 </div>
 
 <!-- 3. Javascript untuk memunculkan dan menghilangkan -->
 <script type="text/javascript">
 
 $(document).ready(function(){
 
  $("#hilang").hide(); // Menyembunyikan Div Hilang berdasarkan ID
  $("#hilangkan").hide(); // Menyembunyikan Div Hilang berdasarkan ID
  
  // Jika tombol hilangkan diklik dipanggil berdasarkan ID
  $("#hilangkan").click(function(){
   $("#hilang").hide();
   $("#hilangkan").hide();
   $(".munculkan").show();
  });
  
  // Jika tombol munculkan diklik dipanggil berdasarkan CLASS
  $(".munculkan").click(function(){
   $("#hilang").show();
   $("#hilangkan").show();
   $(".munculkan").hide();
  });
 
 });
 </script>
</html>

Dari Source code diatas, ada beberapa yang sudah saya tandai menggunakan nomor. hal tersebut adalah penting agar script dapat berjalan sesuai keinginan. Tanda pertama adalah meload file JQuery yang kebetulan berada didalam folder yang sama dengan file source code diatas. jika anda belum memiliki jquery anda dapat mendownloadnya disini. Tanda kedua adalah membuat tag-tag HTML yang akan dihilangkan dan digunakan untuk menghilangkan dan memunculkan.

Terakhir adalah Script untuk menghilangkan dan memunculkan element HTML. Jika kita perhatikan baris code diatas (nomor 3 kebawah). Element HTML dengan id hilang dan hilangkan akan disembunyikan terlebih dahulu menggunakan fungsi hide(). Tombol hilangkan dipanggil berdasarkan IDnya untuk menghilangkan div hilangkan dan tombol munculkan dipanggil menggunakan CLASSnya untuk memunculkan div yang sudah disembunyikan. Pertahikan bahwa perbedaan dalam pemanggilannya terletak pada tanda yang digunakan yaitu menggunakan karakter pagar (#) untuk memanggil id dan titil (.) untuk memanggil class.   

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.