Secara sederhana toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus. Banyak widget di blog yang menggunakan toggle dan kali ini saya akan share beberapa jenis efek toggle dengan jquery. Dengan ini kita bisa berkreasi membuat widget di dalam blog dengan sentuhan efek-efek toggle. Setelah berkelana saya mengumpulkan beberapa efek toggle diantaranya ada sekitar 10 efek yang akan saya share kali ini.

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Kode CSS

.button1 {
    width: 217px;
 font-size:16px;
 font-family:Arial;
 font-weight:normal;
 border:1px solid #3866a3;
 padding:9px 18px;
 text-decoration:none;
 background-color:#63b8ee;
 color:#ffffff;
 display:inline-block;
 text-shadow:1px 1px 0px #7cacde;
  box-shadow:inset 1px 1px 0px 0px #bee2f9;
}
.button1:hover {
 background-color:#468ccf;
}

.toggler {
    width: 500px;
    height: 200px;
  }
  #box {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
    background-color:#efefef;
    border:1px solid #ccc;
  }
  #box h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
    border:1px solid #ccc;
    background:#ddd;
  }

<a href="#" class="button1" id="run">Click Me</a>
<div class="toggler">
  <div id="box">
    <h3>Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("blind")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("bounce")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("clip")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("drop")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("explode")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("fold")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("pulsate")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("scale")
});
 });

$(function() { 
    $("#run").click(function () {
    $("#box").toggle("shake")
});
 });

$(function() {  
    $("#run").click(function () { 
    $("#box").toggle("slide") 
}); 
 });

Selamat berkreasi.... agan-agan semua!!! saya dapat ini dari www.kompiajaib.com