Membuat Vertical Tab View Dengan jQuery

Situseo Blog : Cara membuat tab view secara vertikal, 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.

Script tersebut saya ambil dari jsfiddle.net, dalam situs tersebut tidak disebutkan fungsinya untuk apa, setelah saya lihat bentuk dan cara kerjanya, ternyata bisa untuk menyimpan widget-widget dalam bentuk tab view, dengan alasan itu saya memberi nama script tersebut dengan Tab View Vertikal. Jika penasaran seperti apa script dan bentuk tab view-nya, kalian bisa melihatnya melalui link demo dibawah atau melihat pada sidebar blog ini (jika belum saya rubah).

Demo

Dalam situs tersebut hanya menampilkan bagian script-scriptnya saja, seperti bagian css, jquery dan html-nya tanpa memberi tahu cara pemasangannya, jika kalian kesulitan cara untuk memasangnya dalam blog, kalian bisa menggunakan cara di bawah ini untuk diterapkan dalam blog kalian.

Masuk pada Design - Page Element - Addgadget - HTML/JavaScript dan Copy - Paste script dibawah ini tanpa keterangan kata Css, jQuery dan HTML :

CSS
<style type="text/css">
#accordion {
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);
}
#accordion 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);
}
#accordion .content {
background-color:#ddd;
padding:10px 15px;
color:black;
height:120px;    
}
#accordion h2.active {
background-color:#4BB347;   
}
</style>
jQuery
<script type='text/javascript'>
$(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');
}
});
});
</script>
HTML
<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>

Script murni saya ambil dari situs tersebut tanpa melalukan perubahan sedikitpun, jika kalian kurang cocok dengan tampilan-nya, kalian bisa modifikasi pada bagian css-nya.

Selain bentuk tampilannya bagus (bisa kalian modifikasi sendiri dengan menyesuaikan dengan warna blog kalian) apalagi ditambah dengan efek jquery yang halus, selain itu dengan adanya Vertical Tab View pada blog akan mengurangi ruang sidebar yang telah penuh dengan widget-widget.

Semoga bermanfaat,