How to expand height of the container div whenever child divs are expanded

Question

In my HTML page I have a few <div> s, which can be expanded on clicking their respective links. My requirement is whenever I click on that link, size of its parent container must be increased to the <div> 's size (just like an accordion that expands).

This is what I've tried:

$('.add-comment').click(function() {
    $('div.extra').height($('div.extra').height() + $('div.stream-widgets-block-comment-box').height());
});

The above statement adds the <div> 's height, but the problem is as it is yet not expanded while the code is getting executed, so the <div> 's height ends up being -1.

EDIT 1: This is the JSFiddle link - http://jsfiddle.net/R9uEh/1/ I have added single div in it, which on expansion uses the height of the page. (Need to click on Add a comment to check the expansion)

Answer 1

$('.add-comment').click(function() {
    var vHeight = $('div.extra').height() + $('div.stream-widgets-block-comment-box').height();
    $('div.extra').css('height', vHeight);
});

You can use .css() and var.

Answer 2

Try doing it like so.

$('.add-comment').click(function(){
  var height = $('div.extra').height() + $('div.stream-widgets-block-comment-box').prop('scrollHeight');

  ('div.extra').height( height );
});