Mecha versi 2.6.4 sudah dirilis!

Tambahkan State Aktif untuk jQuery Accordion

Tabel Konten
  1. jQuery 
  2. Kerangka 
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

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

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:

$(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;}

Anonim

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

Taufik Nurrohman

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

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:

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/

Unknown

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

Komentar telah ditutup.