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:

Post a Comment

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..