State Aktif untuk JQuery Accordion

State Aktif JQuery Akordion

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>

Contoh Hasil Penerapannya Ada Dibawah ini :

Panel 1

....
Contoh Isi Panel 1

Panel 2

....
Contoh Isi Panel 2

Panel 3

....
Contoh Isi Panel 3

Panel 4

....
Contoh Isi Panel 4

Share on :

Bagikan

share

| | 0 komentar