CODEWITHSUNDEEP
javascriptjquerycsshtml
user3458749
user3458749

Reputation: 15

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

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)

Upvotes: 0

Views: 129

Answers (2)

janhocevar
janhocevar

Reputation: 105

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 );
});

Upvotes: 0

GOdodgers
GOdodgers

Reputation: 11

$('.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.

Upvotes: 1

Related Questions