Toggle Effect In Jquery

 Published June 22,2010 in JQUERY

Hello everyone, welcome to my today's post on jQuery toggle effect. Today we are going to learn how to implement toggle effect in jquery over an image and a div. After reading this tutorial, you can apply toggle effect in any div or any image.

In my last tutorials we learn How to apply show effect on a div and How to apply hide effect on a div. Hope you enjoyed them. In those 2 tutorials, we can see that we need individual link/button to apply show/hide effects. But jQuery toggle function use only a single link/button to show/hide a div. In a single sentence "toggle" function is a compact version of "show/hide" function. So, Toggle means if div/image is in open state then toggle function close this div and vice verse. I hope now "toggle" term is clear to you. I've also added demo and download links below the tutorial. So that, you can view toggle action in live :)

jquery toggle effect

So, lets go to the tutorial.

 - How to appy toggle effect over an image:

how to appy toggle effect over an image

Demo: http://demos.coolajax.net/jquery/toggle_effect/image_toggle.php

Download: http://demos.coolajax.net/jquery/toggle_effect/image_toggle.zip

 - How to apply toggle effect over a div:

how to apply toggle effect over a div

Demo: http://demos.coolajax.net/jquery/toggle_effect/div_content_toggle.php

Download: http://demos.coolajax.net/jquery/toggle_effect/div_content_toggle.zip

Was this information useful? What other tips would you like to read about in the future?  Share your comments, feedback and experiences with us by commenting below!



Like our site? Be a member of Coolajax fan page to get daily posts updates!

recommended-tutorial You May Like This Posts!

» 6 Awesome jQuery Notification plugins

» Create Image Blink with Fade In Effect

» Enhance Your Website Layout With 6 Powerful jQuery Plugins

» Enhance your web application with jQuery plugins

» work with array in jquery

  tuts_view Total Read: 1068
blog comments powered by Disqus

Topics

Coolajax Fans

coolajax fan page on Facebook