jQuery: Toggle an image

This entry is part 21 of 33 in the series jQuery Tutorial

Here I show an example where you can toggle an image using toggle().

Clicking inside the <div> which I have defined with a border will toggle the image to show and hide in the screen.

hide demo

<!doctype html>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        div {
            border: 2px solid;
            width: 200px;
            height: 200px;
        $(function () {
            $('div').click(function () {

<div><img src="//codecrawl.com/code/images/ushuaia1.jpg"></div>


The syntax for toggle is:

.toggle(duration [,easing] [,function()])

Duration:  A string or number determining how long the animation will run.

Easing:  A string indicating which easing function to use for the transition.

Function():  A function to call once the animation is completed, this is also known as callback function.

Series Navigation<< jQuery: Toggle effect
jQuery: Show effect >>

Leave a comment

Leave a Reply