I have an **image list** which is 250 px height with class product.

If I click on the image it must become 500 px.  

if I click the image again it must become 250px back.  

if I click again it must become 500 px.

so basically I want to toggle between the height of the image.

What I have.

```
<script>
 $(document).ready(function(){

       $('.product').click(function()
       {

          $(this).css("cursor","pointer");
          $(this).animate({height: "500px"}, 'fast');
       });

     $('.product').dblclick(function()
       {

          $(this).css("cursor","pointer");
          $(this).animate({height: "250px"}, 'fast');
       });

   });
</script>

```

this makes the image bigger on single click and smaller on doubleclick.

but I want to do the doubleclick action when the image is 500px.

**all images which are 500px must become 250 again if I click on another picture, so there will only be 1 picture 500px;**

What is the best way to achieve this? an if else statement, or is it possible to toggle height?