GO Blog

Bagaimana cara membuat Efek toggle pada blog ini, seperti pada sidebar, Kode Konverter, dan Emoticon. Disini saya tidak akan menjelaskan pada penggunaan di blog saya, melainkan akan mencoba menjelaskan cara kerja efek toggle.

Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Membuat toggle slide, ada 2 elemen utama yang harus diterapkan. Yakni toggle trigger dan togglecontent, di dalam snippet ini toggle trigger yang saya gunakan ialah tag <h2>, tentunya Anda bebas menentukan, dan untuk toggle content-nya ialah tag pertama setelah toggle trigger.

Contoh sederhananya seperti berikut:

<h2>Toggle Trigger</h2>
<div class="toggle-content">
...Isi toggle letakkan disini...
</div>

tentu saja kode di atas tidak akan sempurna tanpa tempat pembungkus, untuk itu kita akan buat tempat pembungkusnya seperti ini:

<div id='db-toggle-wrap'>

.......

</div>

agar lebih menarik kita buat stylenya, berikut ini adalah style sederhana:

#db-toggle-wrap{width:300px;padding:5px;margin:0px auto;background-color:#333;}
#toggle-container {
  text-align:left;
  width:100%;
  margin:0 auto;
}

#toggle-container h2 { background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAB8CAYAAAB+DADzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABA9JREFUeNrsmt9Lk1EYx89+OBWn02k6HAhCEARCYgT9AV5EUFdDEILAi24MRxdhmERRIEVBEIFBEAy66iZvEqLAy7pQoatAEYJISYc/mU6nfb/jPePdnNs577tdJOeBr7p355zPec553uc9rzye2dlZoWghqN9SFIpY1zPQPPQL+tDb2/tTZTCPArgHeghda25u9jU2Noqamhrh9/tzDVKplEin02J9fV3s7e0t4NIL6A0mkXECDkNP6+rqhtra2kQ4HBYej6esJ7u7u2J1dVWsra3R8zjg0zrgC9DH9vb2rkgkIpzY5uYm4WJra+sJ4PdVwJegL52dnUF66cYymYxYWVkRyWTyFeC37d95C9qehT5Fo9FgS0uLODo6ciWv1yu4YnBgeG5ubuQkj33Qt46Ojr5ynsbj8WyA+Xy+7OeJiYmS7Rl4i4uLDLQr8Pxzoccj8LJPxVNCQ6GQaG1tzUqlPVaRs3wNzwN2cBAaxe0iDg8Py4qe1tbWioaGhqxU+rAdxudWDtnBA01NTWc4oMoghabShwKDzYf5Q2aBQTlzJ6baj0knEAicx3L3EFwPXcaFqoNpSEgMtn6CzwFaLwOh2mAGGhMUwV1yb+02Pj6ed8vYjYFlvz45OSk2NjaYp4+1HRsby/vMe5tMvxXRx8DyliGk0Ai1Zp7XlplKcTWCBGe4xIUN7LdMOWPbYitTDGx9ThO8zJk6DSzd/T84OOCvv0yZEaz7H50HQiKRyNv/WCym3JfP7p2dnWdZjzGrJcyk29r4ssZA4p5KsM5qMW/DZiRpihGpmoHY1h5Iqv3YZ39/fxtdvkrwWyxBRnUApymTpxPYezyhUhL8gxf4RbXA9BYrlULzR/ZcTbuH9R/APgdU91onc1l7+xLe/i58HvPCLexB2edroZVrzzERvN/R9EGpM9dzROsd+/HV7bkLUDp1Ed4u555URdreReM0ZjrK20XlSFsKCi1YR55l1XP1TR5VsN/1unsuUzB+80wdA3Rb902iG3rMgwI9lyoFtLTE/QQw4eYVRk5gELrKQ0OuMyZhCzYu5ZSl6VKvLzrgYm8aPus1JwktAZTUGcBp6M7LPwB0NIDH6XHHrRmwARuwARuwARuwARuwARuwARuwARuwARuwARuwARuwAdvBDv9DnzPH/yg39Vw2M/Vc2nZ66rl0rWL1XLqqWD2XE1WknsupKl7PpWoVr+fSsYrWc+mYq3ouHatoPZeOVbWeSwf8f9ZzuTFX9Vxu8zZsRiYQ1nONuA2kcmbV/WTruSSY9VzDiGRfNcFW+WS2nkuCZT3XDWawanlb8Xoujb11V8+lq2L1XIWVL+9wT/dgdtWo57oOb9MngWmmnsvUc8k3DVPPZcAGbMAGbMCnDPxPgAEAVEgit2OkrP4AAAAASUVORK5CYII=") no-repeat scroll 10px 7px #900;
  color:#fff;
  cursor:pointer;
  display:block;
  font:bold 24px Helvetica,Arial,sans-serif;
  height:24px;
  outline:0 none;
  margin:1px 0;
  padding:10px 10px 10px 50px;
}

#toggle-container h2.active {
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAB8CAYAAAB+DADzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABA9JREFUeNrsmt9Lk1EYx89+OBWn02k6HAhCEARCYgT9AV5EUFdDEILAi24MRxdhmERRIEVBEIFBEAy66iZvEqLAy7pQoatAEYJISYc/mU6nfb/jPePdnNs577tdJOeBr7p355zPec553uc9rzye2dlZoWghqN9SFIpY1zPQPPQL+tDb2/tTZTCPArgHeghda25u9jU2Noqamhrh9/tzDVKplEin02J9fV3s7e0t4NIL6A0mkXECDkNP6+rqhtra2kQ4HBYej6esJ7u7u2J1dVWsra3R8zjg0zrgC9DH9vb2rkgkIpzY5uYm4WJra+sJ4PdVwJegL52dnUF66cYymYxYWVkRyWTyFeC37d95C9qehT5Fo9FgS0uLODo6ciWv1yu4YnBgeG5ubuQkj33Qt46Ojr5ynsbj8WyA+Xy+7OeJiYmS7Rl4i4uLDLQr8Pxzoccj8LJPxVNCQ6GQaG1tzUqlPVaRs3wNzwN2cBAaxe0iDg8Py4qe1tbWioaGhqxU+rAdxudWDtnBA01NTWc4oMoghabShwKDzYf5Q2aBQTlzJ6baj0knEAicx3L3EFwPXcaFqoNpSEgMtn6CzwFaLwOh2mAGGhMUwV1yb+02Pj6ed8vYjYFlvz45OSk2NjaYp4+1HRsby/vMe5tMvxXRx8DyliGk0Ai1Zp7XlplKcTWCBGe4xIUN7LdMOWPbYitTDGx9ThO8zJk6DSzd/T84OOCvv0yZEaz7H50HQiKRyNv/WCym3JfP7p2dnWdZjzGrJcyk29r4ssZA4p5KsM5qMW/DZiRpihGpmoHY1h5Iqv3YZ39/fxtdvkrwWyxBRnUApymTpxPYezyhUhL8gxf4RbXA9BYrlULzR/ZcTbuH9R/APgdU91onc1l7+xLe/i58HvPCLexB2edroZVrzzERvN/R9EGpM9dzROsd+/HV7bkLUDp1Ed4u555URdreReM0ZjrK20XlSFsKCi1YR55l1XP1TR5VsN/1unsuUzB+80wdA3Rb902iG3rMgwI9lyoFtLTE/QQw4eYVRk5gELrKQ0OuMyZhCzYu5ZSl6VKvLzrgYm8aPus1JwktAZTUGcBp6M7LPwB0NIDH6XHHrRmwARuwARuwARuwARuwARuwARuwARuwARuwARuwARuwAdvBDv9DnzPH/yg39Vw2M/Vc2nZ66rl0rWL1XLqqWD2XE1WknsupKl7PpWoVr+fSsYrWc+mYq3ouHatoPZeOVbWeSwf8f9ZzuTFX9Vxu8zZsRiYQ1nONuA2kcmbV/WTruSSY9VzDiGRfNcFW+WS2nkuCZT3XDWawanlb8Xoujb11V8+lq2L1XIWVL+9wT/dgdtWo57oOb9MngWmmnsvUc8k3DVPPZcAGbMAGbMCnDPxPgAEAVEgit2OkrP4AAAAASUVORK5CYII=") no-repeat scroll 10px -73px #369;
}

.toggle-content {
  background:#fff;
  border:1px solid #ccc;
  margin:5px 0;
  padding:10px;
}

sekarang kita mulai bentuk jQuery untuk memfungsikan efek togglenya, contoh seperti berikut:

$('#db-toggle-wrap").toggle('slow') 

karena kita menggunakan tag <h2> sebagai toggle trigger maka buat seperti berikut:

$('#toggle-container>h2").toggle('slow')

Untuk memberikan tanda toggle trigger tag h2 yang sedang bekerja atau aktif kita perlu menambahkan perintah seperti ini:

$("#toggle-container>h2").click(function(){ $(this).toggleClass("active").next().slideToggle("slow");

umumnya toggle conten atau isi akan terlihat ketika toggle trigger di klik sebagai perintah pembuka, jadi disini kita perlu menyembuntikan toggle contentnya dengan perintah seperti berikut:

$(".toggle-content").hide();

untuk keseluruhan jika di terapkan akan menjadi jQuery seperti berikut:

$(document).ready(function(){
 $(".toggle-content").hide(); //posisi awal konten toggle tidak ditampilkan, hapus baris ini jika konten akan ditampilkan sejak awal
 $("#toggle-container>h2").click(function(){ $(this).toggleClass("active").next().slideToggle("slow");
 });
});

Hasil dari seluruh langkah di atas:

<div id='db-toggle-wrap'>
<h2>Toggle Trigger</h2>
<div class="toggle-content">
....Isi toggle letakkan disini....
</div>
</div>

Memperbanyak elemen toggle:

<div id='db-toggle-wrap'>
<div id="toggle-container">
 <h2>Toggle Trigger 1</h2>
 <div class="toggle-content">
  ...Isi toggle letakkan disini...
    </div>
    <h2>Toggle Trigger 2</h2>
    <div class="toggle-content">
  ...Isi toggle letakkan disini...
    </div>
    <h2>Toggle Trigger 3</h2>
    <div class="toggle-content">
  ...Isi toggle letakkan disini...
    </div>
    <h2>Toggle Trigger 4</h2>
    <div class="toggle-content">
  ...Isi toggle letakkan disini...
    </div>
    <h2>Toggle Trigger 5</h2>
    <div class="toggle-content">
  ...Isi toggle letakkan disini...
    </div>
</div>
</div>

jQuery toggle efek:

<script type="text/javascript">
$(document).ready(function(){

 $(".toggle-content").hide(); //posisi awal konten toggle tidak ditampilkan, hapus baris ini jika konten akan ditampilkan sejak awal

 $("#toggle-container>h2").click(function(){
  $(this).toggleClass("active").next().slideToggle("fast");
 });

});
</script>

lihat hasil jadinya di demo berikut ini:


Sekian tentang toggle efek dengan jQuery, semoga bermanfaat...