Sunday, February 12, 2012

Tambahkan State Aktif untuk jQuery Accordion

Add Active State to 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>

Lihat Demo

Labels: , ,

12 Comments:

At Tuesday, February 21, 2012 at 12:11:00 PM GMT+7, Blogger Bayu Handono said...

itu yang state aktif kalo di pasang di blogspot gmana cara mas. saya kurang paham. hehe :D

 
At Tuesday, February 21, 2012 at 3:13:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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 :)

 
At Wednesday, February 22, 2012 at 1:40:00 PM GMT+7, Blogger Bayu Handono said...

okee. thank's tutorialnya hebat2 :p

 
At Wednesday, April 18, 2012 at 7:44:00 PM GMT+7, Anonymous Anonymous said...

@Taufik Nurrohman oia mas kalo cara pasang state aktif di sidebar akoordion punyaku gmana yah caranya??

 
At Wednesday, April 18, 2012 at 11:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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;}

 
At Thursday, April 19, 2012 at 11:28:00 AM GMT+7, Anonymous Anonymous said...

@Taufik Nurrohman saya pake yang dari akordion sederhana.

 
At Thursday, April 19, 2012 at 11:33:00 AM GMT+7, Anonymous Anonymous said...

@Taufik Nurrohman sip mas udah bisa. makasih banyak :D

 
At Thursday, April 19, 2012 at 8:53:00 PM GMT+7, Anonymous Anonymous said...

@Taufik Nurrohman nah klo nambahin script easingnya di sebelah mana ya mas??

 
At Friday, April 20, 2012 at 8:19:00 AM GMT+7, Blogger Taufik Nurrohman said...

@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]

 
At Monday, September 17, 2012 at 9:38:00 PM GMT+7, Blogger Unknown said...

mas, supaya panel tidak terbuka terus (aktive) dan kalo diklik bisa nutup kembali gimana? (seperti punya mas tofik)

 
At Monday, September 17, 2012 at 10:14:00 PM GMT+7, Blogger Taufik Nurrohman said...

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/

 
At Wednesday, September 19, 2012 at 1:27:00 AM GMT+7, Blogger Unknown said...

Sukses mas!!! sudah berhasil. terima kasih... emang keren + pandai + dsb lah...

 

Post a Comment

<< Home