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