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 Comments:
itu yang state aktif kalo di pasang di blogspot gmana cara mas. saya kurang paham. hehe :D
By Bayu Handono, at Tuesday, February 21, 2012 at 12:11:00 PM GMT+7
@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 :)
By Taufik Nurrohman, at Tuesday, February 21, 2012 at 3:13:00 PM GMT+7
okee. thank's tutorialnya hebat2 :p
By Bayu Handono, at Wednesday, February 22, 2012 at 1:40:00 PM GMT+7
@Taufik Nurrohman oia mas kalo cara pasang state aktif di sidebar akoordion punyaku gmana yah caranya??
By Anonymous, at Wednesday, April 18, 2012 at 7:44:00 PM GMT+7
@miretahutempe Itu pakai script yang lama ya, yang pakai .panel-akordion :\
Lebih baik ganti menjadi seperti ini:
$(function() {
$('#akordion .panel-akordion').hide();
$('#akordion h2:first').addClass('active').next().slideDown('slow');
$('#akordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#akordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
Kemudian untuk efek aktifnya bisa menambahkan CSS ini:
#akordion h2.active {color:red !important;}
By Taufik Nurrohman, at Wednesday, April 18, 2012 at 11:30:00 PM GMT+7
@Taufik Nurrohman saya pake yang dari akordion sederhana.
By Anonymous, at Thursday, April 19, 2012 at 11:28:00 AM GMT+7
@Taufik Nurrohman sip mas udah bisa. makasih banyak :D
By Anonymous, at Thursday, April 19, 2012 at 11:33:00 AM GMT+7
@Taufik Nurrohman nah klo nambahin script easingnya di sebelah mana ya mas??
By Anonymous, at Thursday, April 19, 2012 at 8:53:00 PM GMT+7
@miretahutempe Sama saja. Tulis di samping durasi:
$(function() {
$('#akordion .panel-akordion').hide();
$('#akordion h2:first').addClass('active').next().slideDown('slow', "easeInOutExpo");
$('#akordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#akordion h2').removeClass('active').next().slideUp('slow', "easeInOutExpo");
$(this).toggleClass('active').next().slideDown('slow', "easeInOutExpo");
}
});
});
[note]Terkait: Easing JQuery[/note]
By Taufik Nurrohman, at Friday, April 20, 2012 at 8:19:00 AM GMT+7
mas, supaya panel tidak terbuka terus (aktive) dan kalo diklik bisa nutup kembali gimana? (seperti punya mas tofik)
By Unknown, at Monday, September 17, 2012 at 9:38:00 PM GMT+7
Tuliskan kondisi else lalu masukkan perintah berlawanan:
if ($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).addClass('active').next().slideDown('slow');
} else {
$(this).removeClass('active').next().slideUp('slow');
}
Demo: http://jsfiddle.net/tovic/CzE3q/109/
By Taufik Nurrohman, at Monday, September 17, 2012 at 10:14:00 PM GMT+7
Sukses mas!!! sudah berhasil. terima kasih... emang keren + pandai + dsb lah...
By Unknown, at Wednesday, September 19, 2012 at 1:27:00 AM GMT+7
Post a Comment
<< Home