Some Effects Toggle Types (Button) With Jquery

Simply toggle here is a button that allows you to hide and display other elements with subtle special effects. Many of the widget on a blog that uses a toggle and this time I will share some kind of effect toggle with jquery. With this we can be creative to make widgets in the blog with the touch of a toggle effects. After wandering I gather some of the effects of which there are about 10 toggle effect I will share this time.

Read also the: Template Easily to Edit and SEO Friendly (Free)


The first requirement that must exist in a blog that is certainly jquery. Please keep the following jquery on your blog, if there have been any version please skip this step.

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

CSS Code

 .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;  } 

HTML Code

<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>

Below Javascript code and you can see the results by clicking DEMO

1. Blind Effects

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

DEMO

2. Bounce Effects

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

DEMO

3. Clip Effects

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

DEMO

4. Drop Effects

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

DEMO

5. Explode Effects

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

DEMO

6. Fold Effects

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

DEMO

7. Pulsate Effects

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

DEMO

8. Scale Effects

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

DEMO

9. Shake Effects

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

DEMO

10. Slide Effects

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

DEMO

Congratulations to create and beautify your blog

Shortcut :

http://www.kompiajaib.com/2013/12/beberapa-jenis-efek-toggle-dengan-jquery.html