JQuery onClick, toggleFade

Cara menggunakan fungsi onClick pada JQuery adalah sebagai berikut.

ELemen yang diklik

//perhatikan id yang digunakan 
<div id="klik">klik aku</div>

Tampilan/pesan ketika sudah diklik

//perhatikan id yang digunakan 
<div id="msg">Terimakasih telah berkenan menyentuhku</div>

Script JQuery onClick

//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan 
$('#msg').hide();
//memberi event onclick pada id klik
$('#klik').click(function(){
//memberi tugas pada id msg agar tampil
$('#msg').fadeToggle(500);
});
});
</script>

Keterangan: fungsi fadeToggle digunakan untuk even ganda. Pada script ini, event (klik) pertama menampilkan isi pesan dengan animasi fade. event (klik) kedua menyembunyikan isi pesan dengan animasi fade.

Contoh