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