Membuat Vertikal Tab (Accordion) dengan JQuery

Pada umumnya tab view yang pernah banyak dibuat berbentuk tab view mendatar atau horizontal dengan 3 atau 4 bahkan 5 tab view, tab view yang akan kita kupas merupakan tab view berbentuk vertikal atau tegak lurus dengan tambahan penggunaan efek jquery yang sudah bergitu terkenal dengan efek-efeknya yang menghasilkan animasi yang halus.

[related_posts]

Kode HTML

<div id="ardianta">
    <h2>Tab 1</h2>
    <div class="isi">
        Tab pertama.. isi apa yaa???
    </div>
    <h2>Tab 2</h2>
    <div class="isi">
        Aku yang selalu menunggumu
    </div>
    <h2>Tab 3</h2>
    <div class="isi">
      <a href="https://www.facebook.com/groups/tkj.smkn2kuripan/">Aku ingin bertanya?</a>
    </div>
    <h2>Tab 4</h2>
    <div class="isi">
        <a href="http://www.ardianta.tk/2012/04/vartical-tab-view-dengan-jquery.html" rel="dofollow" target="blank">View Tutorial</a>
    </div>
    <h2>Tab 5</h2>
    <div class="isi">
        Ini tab terakhir [www.ardianta.tk]
    </div>
</div>?

Kode Javascript

$(function() {
 $('#ardianta .isi').hide();
 $('#ardianta h2:first').addClass('active').next().slideDown('show');
 $('#ardianta h2').click(function() {
 if($(this).next().is(':hidden')) {
 $('#ardianta h2').removeClass('active').next().slideUp('slow');
 $(this).toggleClass('active').next().slideDown('slow');
 }
 });
 });

Kode CSS

#ardianta {
 width:90%;
 margin:10px auto;
 border:2px solid white;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#ardianta h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:7px 15px;
 background-color:black;
 font:bold 11px Verdana,Arial,Sans-Serif;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

#ardianta .isi {
 background-color:#ddd;
 padding:10px 15px;
 color:black;
 height:120px;    
}

#ardianta h2.active {
 background-color:#4BB347;   
}?

Note:

Baca Juga:  Membuat RSS Reader dengan PHP + JqueryMobile + YQL

$(‘#ardianta h2:first’).addClass(‘active’).next().slideDown(‘show’); ini maksudnya adalah tab pertama ditampilkan untuk mengganti supaya tab pertama agar tidak ditampilkan maka ganti slideDown(‘show’) menjadi slideUp(‘hide’).

Demonya bisa dilihat di: http://jsfiddle.net/ardiantasisgo/w3ugh/

Karena saya baru mempelajari tentang JQuery, jadi pengetahuan saya tentang JQuery kurang banyak, jadi mungkin jika saya sudah menguasai JQuery saya akan kelupas lebih  dalam lagi.

Selamat mencoba!

Komentar

comments

5 Responses

  1. isatrio says:

    Sebenernya itu yang bener namanya accordion bukan tab dan memang seperti itu bentuknya (yang umum).

  2. Ini sudah lama sekali ya mas, hehe
    Sekarang udah bisa pake CSS3 biar lebih enteng:
    http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

  3. tjahyo says:

    kalok untuk cssnya yang bisa di IE, KAYAK APA MAS SUSUNANNYA. MOHON BANTUANE.

  4. Faril says:

    Saya mencoba memasukkan kode widget default blogger seperti popular post, recent post, archive,dll.. Tapi saya bingung kode yang mana yang dimasukkan ke sini? Saya coba memasukkan kode sampe , tapi ternyata isinya nggak keluar. Gimana ya? Kode yang mana yang seharusnya dimasukkan?
    Trims

Leave a Reply

Your email address will not be published. Required fields are marked *

grain storage steel silo grain bins