Tambahkan State Aktif untuk jQuery Accordion
Tambahkan class active
pada panel akordion yang sedang aktif:
jQuery
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
Kerangka
<div id='accordion'>
<h2>Panel 1</h2>
<div class='content'>
....
</div>
<h2>Panel 2</h2>
<div class='content'>
....
</div>
<h2>Panel 3</h2>
<div class='content'>
....
</div>
<h2>Panel 4</h2>
<div class='content'>
....
</div>
</div>
12 Komentar
Bayu Handono
itu yang state aktif kalo di pasang di blogspot gmana cara mas. saya kurang paham. hehe :D
Taufik Nurrohman
@Profil: Itu untuk gambaran saja tentang cara membuat akordion dengan JQuery. Kapan-kapan akan Saya ajarkan bagaimana caranya membuat sidebar akordion hanya dengan modal kode ini. Caranya sederhana sekali :)
Bayu Handono
okee. thank's tutorialnya hebat2 :p
Anonim
@Taufik Nurrohman oia mas kalo cara pasang state aktif di sidebar akoordion punyaku gmana yah caranya??
Taufik Nurrohman
@miretahutempe Itu pakai script yang lama ya, yang pakai
.panel-akordion
:\Lebih baik ganti menjadi seperti ini:
Kemudian untuk efek aktifnya bisa menambahkan CSS ini:
Anonim
@Taufik Nurrohman saya pake yang dari akordion sederhana.
Anonim
@Taufik Nurrohman sip mas udah bisa. makasih banyak :D
Anonim
@Taufik Nurrohman nah klo nambahin script easingnya di sebelah mana ya mas??
Taufik Nurrohman
@miretahutempe Sama saja. Tulis di samping durasi:
[note]Terkait: Easing JQuery[/note]
Unknown
mas, supaya panel tidak terbuka terus (aktive) dan kalo diklik bisa nutup kembali gimana? (seperti punya mas tofik)
Taufik Nurrohman
Tuliskan kondisi
else
lalu masukkan perintah berlawanan:Demo: http://jsfiddle.net/tovic/CzE3q/109/
Unknown
Sukses mas!!! sudah berhasil. terima kasih... emang keren + pandai + dsb lah...