Changing div height per click using jquery

Question

I am trying to increase the height of a div element with the following code:

HTML:

<div id="expandbtn">more..</div> <div id="portfolio"><div class="itemweb" title="lol" rel="#derp"><div class="thumb"><img src="images/items/skills.jpg" title="Skills" rel="#derp"/></div> 

script:

 $('#expandbtn').click(function(){ $('#portfolio').animate({height:'72px'}, 500);}); 

CSS

 #portfolio { width:914px; height:295px; margin:0 0 0 -8px; overflow:hidden;} 

But that will not work. What am I doing wrong?

Answer 1

your code is ok. you can also try

 $('#portfolio').css("height","74px"); 

try putting some background color or image to render clearly

script: http://jsfiddle.net/49HQM/4/

Answer 2

Try downloading it when the document is ready:

  $(document).ready(function(){ $('#expandbtn').click(function(){ $('#portfolio').animate({height:'72px'}, 500); }); 

Answer 3

It works fine, but try setting the position and background color to see an element like THIS IS FIDDLE .

In addition, it will not animate the height of the elements inside the portfolio div if this is what you are trying to do (if the size of these elements is not in percent)?