image width height jquery
<p>hi everyone i want the images to expand and collapse in jquery 
so here is my code ...</p>

<pre><code> &lt;div id="expand_image" style="border-top:1px solid #000"&gt;
 &lt;img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/&gt;
 &lt;/div&gt;
 &lt;div id="expand_image"&gt;
 &lt;img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 /&gt;
 &lt;/div&gt;
 &lt;div id="expand_image"&gt;
 &lt;img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5  /&gt;
 &lt;/div &gt;
 &lt;div id="expand_image"&gt;
 &lt;img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg"  hspace=5 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p>The below is css style</p>

<pre><code> #expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }  
</code></pre>

<p>jquery code is as given below...</p>

<pre><code>  $(function() {
   $("#expand_image ").click(function() {

     var imgwidth = this.width;
     var imgheight = this.height;
    $a=300;
    $b=this.height;
      alert(this.width + 'x' + this.height);



      if ($a==$b )
    {
    alert('300');
       $(this).css('height', '100');
       $(this).css('width', '580');   
    }
    else
    {
      alert('100'); 
       $(this).css('height', '300');
       $(this).css('width', '580'); 
    }       
    });
    });     
</code></pre>

<p>so what i want is ..when i click on one image it should expand and others should collapse..
while if i click on expanded image it should collapse</p>

<p>so i was trying to get the image heights </p>

<p>so if its 300 then collapse else expand</p>

<p>but the output of </p>

<pre><code>alert(this.width + '-' + this.height);
</code></pre>

<p>is :</p>

<p><img src="http://i.stack.imgur.com/nxTx5.png" alt="enter image description here"></p>

<p>anyone knows about this?
thanks in advance..:)</p>
