Toggle size img on click
<p>I have an <strong>image list</strong> wich is 250 px height with class product.</p>

<p>If i click on the image it must become 500 px.
if i click the image againt it must become 250px back.
if i click again it must become 500 px.</p>

<p>etc
etc</p>

<p>so basicly i want to toggle between the height of the image.</p>

<p>What i have.</p>

<pre><code>&lt;script&gt;
 $(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');
       });

   });
&lt;/script&gt;
</code></pre>

<p>this makes the image bigger on single click and smaller on doubleclick.</p>

<p>but i want to do the doubleclick action when the image is 500px.</p>

<p><strong>all images wich are 500px must become 250 again if i click on another picture, so there will only be 1 pictuer 500px;</strong></p>

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