どうぞ。これはあなたが達成しようとしていることに役立つと思います。基本的に、テキストの長さに関係なく、div の高さはコンテンツの高さ、または最初の画像の高さのいずれか大きい方になります。次に、div をクリックすると、追加の画像が読み込まれます。画像が読み込まれた後、div をもう一度クリックすると、縮小して元のサイズに戻ります。
それをチェックして、微調整が必要な場合はお知らせください。
注: これはブラウザー ウィンドウの方が見栄えがよくなりますが、jsfiddle では機能します。
<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>