Jquery Ajax Effect Show Hide

Okeh,, berhubung hari sabtu kemaren saya Wisuda #eh #gakadahubungannya. Kalo kemaren udah buat form php, nah sekarang kita lanjutin dengan tutorial memberi effect jquey pada form agar kelihatan sedikit lebih kereen. Efect ini biasanya dipakai untuk logout pada twitter, gmail, facebook, dan lainnya. Okeh, Copy code dibawah ini:

<html>
<head>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>


<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:200px;
display:none;
}
</style>
</head>


<body>


<div class="panel">
<img src="http://i838.photobucket.com/albums/zz306/kurtnia/384037_2279279458911_1156522924_31990555_88236548_n.jpg" width="250" height="190">
</div>


<p class="flip">Buka / Tutup</p>


</body>
</html>

Nah , hasilnya itu akan seperti ini:

Share on Google Plus

About Kurnia Rahman

Kurnia Rahman Agus - Programmer lepas yang mengisi hari-harinya dengan memberikan ilmu kepada siswa-siswi di salah satu SMK di Pekanbaru. Beliau aktif di beberapa komunitas seperti Blogger Bertuah dan Baleno Club Riau.

3 comments :

  1. ahh, saya mampirnya uda tengah malam banget. sory nggak sempat baca psotingan kamu. cuman mau nitip(bayar utang postingan)

    Here=> http://koskakiungu.blogspot.com/2011/11/faizealotous.html

    ^^

    ReplyDelete
  2. mntap ommm... pengen bljr java neh... http://netiplisiskom.blogspot.com :d

    ReplyDelete

Terima kasih telah berkunjung, Semoga Bermanfaat..