Как Скрыть\показать Часть Блока

  • Автор темы noid
  • Дата начала
Статус
Закрыто для дальнейших ответов.
N

noid

Гость
#1
Для новостного сайта, на шаблон просмотра кратких новостей в категориях и на главной вместо стандартных тумбов, пытаюсь сделать обрезку по нижнему краю. Подсмотрел на джойреакторе. Пытался капнуть, как у них сделано, да там черт ногу сломит.

Предложили вариант, но что-то не открываются блоки. демо

Ну и сам код, разумеется. Для меня это темный лес.
Код:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>11</title>
</head>
<style>
.item {max-height: 200px; overflow: hidden;}
</style>
<body>

<script type="text/javascript">
$(document).ready(function(){
$('.item .holder').each(function(){
var holder = $(this);
var parent = $(this).parent('.item');
if(holder.height() > parent.height()) {
parent.after($('<button>Открыть</button>').on('click',function(){
parent.height(holder.height());
return false;
}));
}
});
});
</script>

<div class="item">
<div class="holder">
<img src="img1.jpg" /><br />
<img src="img2.jpg" /><br />
<img src="img3.jpg" />
</div>
</div>

<div class="item">
<div class="holder">
<img src="img3.jpg" /><br />
<img src="img3.jpg" /><br />
<img src="img3.jpg" /><br />
<img src="img3.jpg" /><br />
<img src="img3.jpg" />
</div>
</div>

<div class="item">
<div class="holder">
<img src="img3.jpg" />
</div>
</div>

</body> 
</html>
 
Статус
Закрыто для дальнейших ответов.