В общем ситуация получается следующая... Если блок один то все нормально работает... Но если блоков несколько то отображается ссылка "Читать далее" у тех блоков у которых она появлятся не должна...
<html>
<head>
<script language="JavaScript" src="jquery.min.js"></script>
</head>
<script>
$(function(){
bloks_total = $('body').find('.ta');
if(bloks_total.length){
for(i=0; i < bloks_total.length;i++){
blok_height = Number($(bloks_total[i]).css('height').replace('px',''));
if(blok_height > 80){
$(bloks_total[i]).css('max-height','80px');
$('.read-next').show();
}
}
}
});
$('.read-next').live('click', function(){
is_parent = $(this).parent();
blok = is_parent.find('.ta');
if(blok.css('max-height') != 'none'){
blok.css('max-height','');
$(this).text('Скрыть');
} else {
blok.css('max-height','80px');
$(this).text('Читать далее...');
}
return false;
});
</script>
<body>
<div style="height:'100%'">
<div class="ta" style="overflow:hidden">
1-ый блок bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>
<a class="read-next" href="#" style="display:none;" >Читать далее...</a>
</div>
<div style="height:'100%'">
<div class="ta" style="overflow:hidden">
2-ой блок bla<br>bla
</div>
<a class="read-next" href="#" style="display:none;" >Читать далее...</a>
</div>
<div style="height:'100%'">
<div class="ta" style="overflow:hidden">
n-ый блок bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
</div>
<a class="read-next" href="#" style="display:none;">Читать далее...</a>
</div>
</body>
</html>