https://stackoverflow.com/questions/19916419
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianHere you go. I think this will work for what you are trying to accomplish. Basically, no matter how long the text, the div height will either be the height of the content, or the height of the first image, whichever is bigger. Then when clicking the div, it will load the additional images. After the images are loaded, if you click the div again, then it shrinks back down to its original size.
Check it out and let me know if any tweaks are needed.
Note: this looks better in a browser window, but works in jsfiddle.
http://jsfiddle.net/fLPM5/1/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.story {
width:75%;
padding:5px;
margin:5px;
cursor:pointer;
border:1px solid black;
}
.text{
padding:5px;
margin:5px;
width:20%;
}
.images{
float:right;
padding:5px;
margin:5px;
width:70%;
}
img{
padding:5px;
margin:5px;
width:95%;
}
</style>
</head>
<body>
<div class="story" id="story1">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu 100% Original Work created by Howard Renollet for StackOverflow.com http:// stackoverflow.com /questions /19916419 /expanding-preview-calcheight-function/ ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut.</p>
</div>
</div>
<div class="story" id="story2">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.</p>
</div>
</div>
<div class="story" id="story3">
<div class="images">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img src="http://www.gstatic.com/webp/gallery/3.jpg" />
<img src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper.</p>
</div>
</div>
<script>
(function () {
//Get each story box
$(".story").each(function () {
//for each .images box
$(this).children(".images").each(function () {
//hide all of the images
$(this).children("img").hide();
});
//show the first image
$(this).children(".images").children("img:first").show();
//get the text height
var textHeight = $(this).children(".text").height();
//get the image height
var imgHeight = $(this).children(".images:first-child").height();
//define originalHeight
var originalHeight;
//Which one is bigger?
if (textHeight >= imgHeight) {
//If the text height is larger
//set the story box height to the text height
$(this).height(textHeight);
//set originalHeight
originalHeight = textHeight;
}
else if (imgHeight > textHeight) {
//if the image height is larger
//set the story box height to the image height
$(this).height(imgHeight);
//set originalHeight
originalHeight = imgHeight;
};
//when clicking the div
$(this).click(function () {
//if this height is less than the image max height
if ($(this).height() <= originalHeight) {
//show the images
$(this).children(".images").children("img").show();
//set this height to the image max height
$(this).height($(this).children(".images").height());
}
else {
//for each .images box
$(this).children(".images").each(function () {
//hide all of the images
$(this).children("img").hide();
})
//show the first image
$(this).children(".images").children("img:first").show();
//set the text height
var textHeight = $(this).children(".text").height();
//set the image height
var imgHeight = $(this).children(".images:first-child").height();
//Which one is bigger?
if (textHeight >= imgHeight) {
//If the text height is larger
//set the story box height to the text height
$(this).height(textHeight);
}
else if (imgHeight > textHeight) {
//if the image height is larger
//set the story box height to the image height
$(this).height(imgHeight);
};
};
});
});
})();
</script>
</body>
</html>
