Hemmm abis jalan - jalan dari sini dapet ide deh buat posting kali ini. dan kali ini saya akan membahas tentang efek show / hide yang menggunakan jquery dan memanfaatkan html checkbox jadi orang bakal liat kontennya apabila checkbox nya sudah di centang. hayo pada penasaran gak..? langsung liat demonya aja ya.
DEMO
Nah kalau udah liat demo kan dah jelas jadi gak pusing jelasin lagi, lumayan nih buat nyembuyiin sesuatu yang sangat sesuatu wkwkwkwk anda bisa gunakan ini untuk menyimpan gambar dan teks atau apalah yang anda ingin sembunyikan yang bisa membuat orang penasaran :D
Ok mari kita langsung praktek.
1. Baca Cara masuk ke dalam template
2. Cari kode
</head>3. Simpan kode jquery di bawah ini di atas kode
</head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('#cek').change(function(){
$("#konten").slideToggle('slow');
});
if($('#cek').is(':checked')){
$("#konten").slideToggle('slow');
};
});
</script>4. Jika kode yang bergaris bawah sudah ada di template anda gak usah lagi anda copy kode yang bergaris bawah itu cukup kode yang berada di bawahnya saja anda copy.
5. Cari kode
]]></b:skin>6. Simpan kode di bawah ini di atas kode
]]></b:skin>.data {
background-color: #9ac;
padding: 5px;
display: block;
color: #000
}
#konten {
background-color: #def;
padding: 5px 10px;
font: normal 13px/20px Arial,sans-serif;
border-top: 3px solid #777;
display: none;
}7. SIMPAN TEMPLATE.
8. Masuk ke Tatan Letak / Rancangan Klik Tambah Gadget Lalu Pilih HTML/Javascript dan masukan kode html di bawah ini.
<div class='data'> <input id="cek" name="akucek" type="checkbox" value="Y"/> Centang Untuk Melihat Konten <div id="konten"> Disini konten yang akan di beri efek show/hide Disini konten yang akan di beri efek show/hide Disini konten yang akan di beri efek show/hide Disini konten yang akan di beri efek show/hide Disini konten yang akan di beri efek show/hide Disini konten yang akan di beri efek show/hide </div> </div>
Nah Anda Cukup Mengganti teks nya dengan konten anda lalu kata Centang Untuk Melihatn konten Bisa anda ganti sesuai keinginan anda.
