Membuat animated accordion tab

Setelah beberapa waktu lalu saya membuat artikel mengenai membuat menu accordion, kali ini saya ingin sedikit explorasi mengenai accordion. Kali ini yang akan di bahas mengenai membuat animated accordion tab atau animasi pada accordion, bagi yang masih bingung mungkin sedikit gambaran yaitu accordion yang pada saat kita klik dapat berubah warna latar nya, warna berubah pada saat efek sliding berlangsung, dan kembali normal saat selesai sliding nya. :D
Contoh:

Bagian Web Designer

Web Designer

Web designer bertugas sebagai juru gambar, yaitu mendesain website.

Web designer biasanya memiliki kemampuan mengolah gambar menggunakan Photoshop.
Disamping itu, dia juga memiliki kemampuan mengatur layout menggunakan
Dreamweaver, HTML, CSS, Javascript (jQuery).

Bagian Web Programmer

Web Programmer

Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website.

Bagian Web Administrator

Web Administrator

Web administrator bertugas sebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website.

Tampilan bisa dilihat contoh nya, tapi untuk lebih pasti, kalian bisa download source nya pada akhir artikel ini...

Sedikit penjelasan dan cara modifikasinya:
Script Js

<script type="text/javascript">
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
// tambahkan efek baru ke tabs
$.tools.tabs.addEffect("slide", function(i, done){
// 1. ketika pane dibuka, maka akan terlihat efek slide dengan efek kedipan warna ungu
this.getPanes().slideUp().css({backgroundColor: "#b8128f"});
// 2. setelah pane terbuka, maka kembalikan warnanya ke warna semula (transparent)
this.getPanes().eq(i).slideDown(function(){
$(this).css({backgroundColor: 'transparent'});
done.call(); // fungsi call harus dipanggil setelah efek selesai
});
});
});
</script>

Dari script diatas dapat kalian baca dan fahami maksudnya, karena tiap baris sudah diberikan komentar nya...

Script di dalam tag

<body> </body>

<div id="accordion">
<h2 class="current">Bagian Web Designer</h2>
<div class="pane" style="display: block;">
<img width="100" src="css/img/CP.jpg" style="margin: 0pt 15px 15px 0pt; float: left;">
<h3>Web Designer</h3>
<p><strong>Web designer bertugas sebagai juru gambar, yaitu mendesain website.</strong></p>
<p style="clear: both;">
Web designer biasanya memiliki kemampuan mengolah gambar menggunakan Photoshop.
Disamping itu, dia juga memiliki kemampuan mengatur layout menggunakan
Dreamweaver, HTML, CSS, Javascript (jQuery). </p>
</div>
<h2>Bagian Web Programmer</h2>
<div class="pane">
<h3>Web Programmer</h3>
<p>Web programmer bertugas sebagai juru coding, yaitu melakukan pemrograman website.</p>
</div>
<h2>Bagian Web Administrator</h2>
<div class="pane">
<h3>Web Administrator</h3>
<p>Web administrator bertugas sebagai juru maintenance, yaitu melakukan pemeliharaan dan penjagaan website.</p>
</div>
</div>

Dan script diatas adalah script untuk mengatur header dan isi content dari accordion tab yang di buat, silahkan kalian explorasi lebih lagi...

Download Source code accordion tabs

Calon Programer

Klik Like/share jika anda menyukai tulisan Share