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

So, lets go to the tutorial.

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

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!
Tags:
jQuery toggle effect, toggle effect an image, toggle effect a div, how to apply toggle effect, show and hide effect, toggle effect tutorial
Total Read: 1068 Topics