CODEWITHSUNDEEP
javascriptjquery
S Raihan
S Raihan

Reputation: 387

Increase a Div height based on another Div content and it's height

Current js fiddle Example

I have two Div .mainDiv and .sideDiv. .mainDiv has long content having toggle paragraph in it . When I click the Click to expand text ,FULL paragraph shows up and the height of this content increases .

WHAT I WANT : When I press the Click to expand text, the .mainDiv height increases and also .sideDiv height should increase equal to .mainDiv height . and when Again the main DIV decrease the height of .sideDiv also decrease .

Is there any way with jQuery to make that happen ? I am not good at jquery So I am finding it difficult to make it happen if someone help me with it would be great for me . and also sorry for bad English

Thanks

HTML

<div class="mainDiv">
<p class="click"> Click to expand </p>

<p class="hide">
    and scrambled it to make a type specimen book. It has survived not only five centuries, 
    but also the leap into electronic typesetting, remaining essentially unchanged. 
    It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum.

</p>    

</div>

<div class="sideDiv">
  <p>Should Expand this Div</p>
</div>

CSS

.mainDiv {
background-color:#ccc;
float:left;
width:200px;
}

.sideDiv {
background:yellow;
float:left;
width:200px;
height:auto;
}

JavaScript

$('.hide').hide();

$('.click').on('click', function () {
$('.hide').toggle();
});

Upvotes: 1

Views: 1621

Answers (3)

Tim Wasson
Tim Wasson

Reputation: 3656

I took this approach, which resizes when the toggle is complete.

$('.hide').hide();

$('.click').on('click', function () {
    $('.hide').toggle(0,function() {
        $('.sideDiv').height($('.mainDiv').height());
    });

});

http://jsfiddle.net/M35xJ/7/

Upvotes: 2

reggaemahn
reggaemahn

Reputation: 6668

Add this to your code

$('.hide').hide();

$('.click').on('click', function () {
    $('.hide').toggle();
    var x = $('.mainDiv').css('height');      // Added
    $('.sideDiv').css('height', x);           // Added
});

FIDDLE

Upvotes: 2

kbvishnu
kbvishnu

Reputation: 15650

Yes , Please try this.

Demo :http://jsfiddle.net/M35xJ/5/

$('.click').on('click', function () {
    $('.hide').toggle();        
    $('.sideDiv').height($('.mainDiv').height());
});

More details : http://api.jquery.com/height/

Upvotes: 5

Related Questions