Top 10 Best jQuery Toogle Effects

Top 10 Best jQuery Toogle Effects - Toogle here is a button that allows you to hide and show the other elements with subtle special effects, usually used to a widget or gadget.

For example, the use toogle on a widget in the sidebar. It is very useful to save space on the sidebar to make it look neat and structured. So as not to disturb view of visitors while reading a post or article on your blog.

Here, I will share the Top 10 Best jQuery toogle effects that you can use:

1. Blind Effect       DEMO

2. Bounce Effect    DEMO

3. Clip Effect         DEMO

4. Drop Effect       DEMO

5. Explode Effect   DEMO

6. Fold Effect        DEMO

7. Pulsate Effect    DEMO

8. Scale Effect       DEMO

9. Shake Effect      DEMO

10. Slide Effect      DEMO

How to install a toogle button

Previous, first requirements that must exist in blog certainly is jquery script. Please put this script in your template, exactly at before or above code </body>. If your template you already have this jquery script (any version), please skip this step.

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


then, put the following script just below the jquery script above. Here I am calling element #sidebar-wrapper that I want to hide and show with toogle.

<script type='text/javascript'>
  $(function() {
    $("#run").click(function () {
    $("#sidebar-wrapper").toggle("blind")
});
 });
</script>

Note :

• Code that red blocked can be changed according to element/gadget/widget of your choice
• Code that blue blocked can be changed according to toogle effect of your choice. For example, 'slide' for Slide Effect, or 'clip' for Clip Effect.

then, call with html code below. Put a toogle button at the position you want.

<a href="#" id="run">Click Me</a>


Source:  http://www.kompiajaib.com

blogging blogging tutorial