Hi all, ini adalah snippet ke-3 saya di 80tasks.com
Kali ini saya akan mencoba untuk membuat efek toggle slide sederhana dengan script yang cukup pendek dan mudah dipahami. Dokumentasi mengenai fungsi ini dapat dilihat di http://api.jquery.com/toggle/
(X)HTML
Dalam membuat toggle slide, ada 2 elemen utama yang harus ada. Yaitu toggle trigger dan toggle content, di dalam snippet ini toggle trigger yang saya gunakan ialah tag <h2>, tentunya Anda bebas menentukan, dan untuk toggle content-nya ialah tag pertama setelah toggle trigger. Struktur sederhananya dapat dilihat pada kode berikut:
<div id="toggle-container">
<h2>Toggle Trigger 1</h2>
<div class="toggle-content">
Toggle content text comes here
</div>
<h2>Toggle Trigger 2</h2>
<div class="toggle-content">
Toggle content text comes here
</div>
<h2>Toggle Trigger 3</h2>
<div class="toggle-content">
Toggle content text comes here
</div>
</div>
CSS
#toggle-container {
text-align:left;
width:600px;
margin:0 auto;
}
#toggle-container h2 {
background:url("state-bg.png") no-repeat scroll 10px 7px #69697A;
color:#fff;
cursor:pointer;
display:block;
font:bold 24px Helvetica,Arial,sans-serif;
height:24px;
outline:0 none;
margin:4px 0;
padding:10px 10px 10px 50px;
}
#toggle-container h2.active {
background:url("state-bg.png") no-repeat scroll 10px -73px #651261;
}
.toggle-content {
background:#fff;
border:1px solid #ccc;
margin:5px 0;
padding:10px;
}
Font, warna, dan ukuran dapat disesuaikan sesuai selera.
JS
Pastikan Anda sudah mendownload jQuery sebelumnya, atau dapat menggunakan hotlink pada area <head></head> dengan kode sebagai berikut:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Langkah berikutnya ialah memanggil fungsi toggle yang dimiliki oleh jQuery, dengan kode sebagai berikut:
<script type="text/javascript">
$(document).ready(function(){
$(".toggle-content").hide(); //posisi awal konten toggle tidak ditampilkan, hapus baris ini jika konten akan ditampilkan sejak awal
$("#toggle-container>h2").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
});
</script>
Untuk lebih jelasnya silakan lihat demonya dan download sourcenya. Terima kasih 
Posted by Ananda Rizki - http://twitter.com/neosheet
Awesome
ah bisa aja nih, hasil modif dikit dibilang awesome. hehe.. btw punya ide desainnya ga yg bisa diimplementasiin di toggle?
whehe di tantangin nih
,,, ok deh nanti dibuatin psdnya, buat tonggle keren.
wah mantap nih
ada typo, pada:
$("#toggle-container>h2").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
Seharusnya:
$("#toggle-container h2").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
Itu sebenarnya bukan typo ar, itu penulisan css yang artinya menargetkan h2 setelah id #toggle-container, sehingga tidak mempengaruhi h2 lain setelahnya.
Referensi : Poin 8, http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Thanks buat referensinya.
yups betul sekali kata rio, karena tidak menutup kemungkinan user akan memasukkan h2 di dalam area div class=”toggle-content”
Mantep, Gan.. ini yang ane cari.. udah berfungsi, Gan.. tapi kenapa ya kok background ama gambar thumbnailnya plus minusnya gak muncul di blog ane..
padahal png-nya udah diupload, malah sempet dipotong satu-satu juga.. tetep aja gambar ama bekgronnya gak muncul ;_O
bisa bantu, Gan?
ane bikin buat spoiler emotikon di atas kotak komentar.