>Simpel Jquery Akordin

>Sebenernya aku malu kalau ikut-ikutan posting yang isi postingane sama dan juga mungkin mencontek dari isi postingan orang tapi apa boleh buat ini aku lakuin guna menjawab pertanyaan dari sobat bloger Anak Rantau yang bertanya soal trik dan cara deglarasi penempantan dan pemasangan Jquery Akordion.

WAW DAH DAPAT NI ???? BUAT TUTORIALNYA SKALIAN BRO, SAYA TUNGGU N’ GK PAKE PR PR AN, LANGSUNG JADI.

HEHEEHE, AKU LIAT DI BLOG BRO YG SATUNYA UDAH BERHASIL. JGN LUPA BUAT TUTORIALNYA, GK PKE PR PR AN 😀

Ini sudah pernah di posting oleh Kang Hendriono / Bloer Tune Up yang menerangkan tentang cara bagaimana menerapkan scipt ini pada blog dalam bahasa indonesia karena Jenis ini merupakan jQuery Accordion yang di kembangkan oleh Soh Tanaka.

Dan seperti apa hasil dari pemasangan scrip ini pada blog kita….?????
Silahkan teman-teman liat Di Sini dan ini examples accordion.
OK gak perlu panjang lebar lagi masi kita ke pokok pembahasaan kita tentang Simpel Jquery Akordion..

Secenario HTML

Kita akan membuat suatu wadah utama (class=”container”) yang terdiri dari  sebuah keranjang (class=”acc_container”) lagi didalamnya. Sedangkan masing-masing judul (h2) wadah (yang kemudian akan dibuat pemicu saat di klik) diberi class=”acc_trigger”. Maka perhatikan kode dibawah ini:

Web Design & Development


Secenario Css

Dalam skenario ini tidak akan dijelaskan attribute CSS yang menyertainya, hanya akan dijelaksan garis besarnya saja. Perhatikan script CSS dibawah ini:

h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}

Secenario Jquerynya

Sekarang menginjak ke kode jQuery-nya. Makanya disimpan terakhir karena ternyata kode jQuery-nya tidak terlalu rumit. Perhatikan kode dibawah ini dan keterangan yang menyertainya.


$(document).ready(function() {
//Code goes here
});
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});

Plugin Jquery

Plugin ini yang di tempatan bersaman dengan code script di atas, jd jikalau dalam template sobat sdah ada plugin ini jangan si sertakan, untuk keterangan penempatan plugin ini di tempatan di atas script jquerynya agar cara kerja dari plugin ini dan scriptnya bekerja normal.. dan ini plugin yang harus di tambahkan di atas Secenario Jquery.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">

dan jika sobat ingin menggunakan kode script plugin sendiri sobat bisa mendownlodnya langsung di sini Jquery lalu uploud di webhost googlecode sobat sendiri..
Cukup sekian penjelasan aku ini, mungkin bisa menjawab dari pertanyaan para sobat sekalian. Dan mungkin dari cara aku menjelaskan kurang di mengerti dimohon harap maklum karena aku sendiri masih taraf belajar… hehehehehe

Sumber Arikel
www.sohtanaka.com dan Bloger Tune Up

Advertisements

5 Comments (+add yours?)

  1. S2SELF
    Jan 27, 2011 @ 10:33:35

    >waw, matur tengkyu bos,,,, ntar deh ku coba, 🙂

    Reply

  2. Anak Rantau
    Jan 27, 2011 @ 11:04:59

    >ok boz jika sudah nt postingn ini q hapuz

    Reply

  3. S2SELF
    Jan 27, 2011 @ 11:15:03

    >wis, jangan bos, biar aja, siapa tau nanti ada yg brminat. aku pun blum tau kpan mau buat, soalnya, aku ol diwarnet nih, modem flash lagi lemot,

    Reply

  4. Anak Rantau
    Jan 29, 2011 @ 20:21:49

    >ea dah ga aku hapus, tapi aku cm mau ea mbok jangan di publikasikan aj, g enak sma yang modif n ngebangin ni script

    Reply

  5. S2SELF
    Feb 05, 2011 @ 04:41:28

    >OKE , SIP BOSS …hehehehe

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About Me

My Tweets

%d bloggers like this: