Membuat Show/Hide Div dengan JQuery

JQuery

JQuery - JavaScript Framework
JQuery – JavaScript Framework

Teknologi web saat ini sudah sangat luar biasa, dimana sudah hampir semua website melibatkan JavaScript dapat proses manipulasi data, sehingga lebih interaktif dengan pengguna (end user). Salah satu Framework Javascript yang terkenal adalah JQuery. Disini saya akan sedikit memberikan dasar-dasar bagaimana membuat sebuah content/isi/div bisa disembunyikan dan ditampilkan.

Pertama-tama Anda harus meng-download file JQuery yang bisa didownload langsung di halaman website JQuery disini untuk mendapatkan file versi terbaru JQuery, setelah itu uka editor yang biasa dipakai, misalnya Dreamweaver, Sublime, Notepad++, dan lainnya.

  1. Buat file html dengan menggunakan IDE (Editor) yang biasanya Anda pakai, jika tidak ada, bisa menggunakan notepad.
  2. Tulis script dibawah ini:
     1.<!DOCTYPE HTML>
     2. <html>
     3. <head>
     4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5. <script language="javascript" src="jquery-2.1.4.js"></script>
     6. <script language="javascript">
     7. $(document).ready(function(){
     8. $("#hilang").click(function(){
     9. $("p").hide();
     10. });
     11. $("#muncul").click(function(){
     12. $("p").show();
     13. });
     14. });
     15. </script>
     16. <title>Untitled Document</title>
     17. </head>
    18. <body>
     <h3>Belajar JQuery</h3>
     <button id="hilang">Hilangkan</button> | <button id="muncul">Munculkan</button>
     <p>Ini adalah sebuah paragraph, yang berisi kalimat-kalimat menarik</p>
     <p>Ini adalah paragraf lain.</p>
     </body>
     </html>
  3. Keterangan baris program
    Baris 5: mengambil (link) file JQuery dalam satu folder dengan file ini.
    Baris 8: mendeteksi tombol dengan id=”hilang” kemudian jika di klik akan melakukan sesuatu.
    Baris 9: menyembunyikan (hide) semua selektor “p” dalam hal ini paragraf.
    Baris 11: sebaliknya dari haris 8 dan 9

Semoga berhasil

Iklan

Satu pemikiran pada “Membuat Show/Hide Div dengan JQuery

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s