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

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

    $(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 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:

    $(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.