Reputation: 241
The following code does what it should perfectly, however I need to add 30% more height to the containing element .boxy
on top of the added variable heights.
I've tried searching for ways to add a percentage to the equation, but so far I've just found vague answers or non-applicable methodologies.
$(".exPand a").click(function (event) {
event.preventDefault();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
$(this).closest('.boxy').animate({height: postHeight+excHeight}, 1000);
});
Live output:
<div class="boxy">
<div class="boxGrad"></div>
<div class="postmetadata"></div>
<div class="articleTitle"></div>
<div class="rightCtrls"></div>
<div class="ajaxBoxLoadSource"></div>
<div class="articleImageThumb"></div>
<div class="initialPostLoad"></div>
</div>
Upvotes: 0
Views: 165
Reputation: 78690
Just multiply by 1.3
$(this).closest('.boxy').animate({height: (postHeight * 1.3)+excHeight}, 1000);
Move the * 1.3
to the appropriate place depending on which height you want 30% of.
Upvotes: 3