image width height jquery - php

Question

hi everyone i want the images to expand and collapse in jquery
so here is my code ...
<div id="expand_image" style="border-top:1px solid #000">
<img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div id="expand_image">
<img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div id="expand_image">
<img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5 />
</div >
<div id="expand_image">
<img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>
</div>
The below is css style
#expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; }
jquery code is as given below...
$(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');
}
});
});
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
so i was trying to get the image heights
so if its 300 then collapse else expand
but the output of
alert(this.width + '-' + this.height);
is :
anyone knows about this?
thanks in advance..:)

Answer 1

Never use same ID
On your HTML, you are using <div id="expand_image" which will cause problem to find the element.
Refer LIVE DEMO
HTML:
<div class="expand_image" style="border-top:1px solid #000">
<img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5 />
</div >
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>
JS:
$(function() {
$(".expand_image").click(function() {
$(this).css({
'height':'300',
'width':'580'
});
$(".expand_image").not(this).css({
'height':'100',
'width':'580'
});
});
});
CSS:
.expand_image {
overflow:hidden;
float:left;
height:100px;
margin:0 5px;
border-bottom: 1px solid #000;
cursor:pointer;
}

Answer 2

height and width are functions, so you need to call height() instead of height (notice the braces), try this instead:
alert(this.width() + '-' + this.height());

Answer 3

First put your divs in a wrapper then reference them by class instead of id...since you have the same id's which will avoid collisions:
<div id="wrapper">
<div class="expand_image" style="border-top:1px solid #000">
<img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" hspace=5/>
</div>
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" hspace=5 />
</div>
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" hspace=5 />
</div >
<div class="expand_image">
<img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" hspace=5 />
</div>
</div>​
by having it in a div wrapper you do not have to initiate every instance of the expand_image class so this code is will perform better:
$("#wrapper").on("click", ".expand_image", function () {
if ($(this).height() == 300) {
$(this).css('height', '100');
} else {
$(".expand_image").css('height', '100');
$(this).css('height', '300');
}
});
Update your CSS by changing #expand_image to .expand_image
.expand_image { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; cursor:pointer; } ​
and it will work! HERE IS A JSFIDDLE EXAMPLE