CSS, Web Design / Posted 3 years ago / 5 Komentar
accordion-jquery

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,belajar accordion,tab accordion,accordion tab,accordion tab jquery,website dengan html 5,membuat tab accordion,tab vertikal,cara buat vertical tabs wordpress,accordion dengan jquery,download layout wbsite yang udah jadi,accordion jquery,koding tab pada html,accordion tab css3,membuat mysql dan accordio,script html membuat web berita,membuat accordion dengan php css dan jquery,membuat accordion dengan css Tags: , , , , ,
cToko Toko Online

5 Comments

  1. isatrio
    Posted April 21, 2012 at 9:02 am | Permalink

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

    • Posted April 21, 2012 at 11:18 pm | Permalink

      Terimakasi koreksinya bang.. hehe sy baru belajar nih.. mohon bimbingannya bang..

  2. Posted April 29, 2012 at 4:27 pm | Permalink

    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
    Posted May 10, 2012 at 9:37 am | Permalink

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

  4. Posted November 30, 2012 at 6:12 am | Permalink

    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

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign