Tweet

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.

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:

$(‘#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!

Tags

jquery tab,accordion,tab jquery,accordion tab,tab accordion,belajar accordion,accordion tab jquery,cara buat vertical tabs wordpress,membuat tab accordion,tab vertikal,accordion tab css3,accordion dengan jquery,accordion jquery,accordion tabs css3,membuat vertikal tab accordion dengan jquery,membuat konten acordion dan tab dengan jquery dan css,membuat list accordion sederhana dengan jquery,css accordion,css accordion tab,membuat mysql dan accordio Tags: Accordion, accordion tab, jquery, jQuery tab, tab, vertical tab