Javascript-форум - Раздвигающийся текст

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Раздвигающийся текст (https://javascript.ru/forum/dom-window/33746-razdvigayushhijjsya-tekst.html)

Раздвигающийся текст

Ребята! Очень надеюсь на Вашу помощь!
Имеется большой кусок текста с html-тегами. Как сделать так, чтоб была видна только его верхняя часть (в пределах 80px), а остальная часть появлялась при нажатии на кнопку "Читать далее..." (без перезагрузки страницы).
Находил несколько решений, но к сожалению не одно из них не подошло, т.к. во всех этих решениях предполагается наличие двух частей - то что должно быть отображено и то, что должно быть скрыто.
Самый подходящий вариант который был найден выглядет следующим образом:

<html>
<body>
	Тут текст<BR>
	<div style="height:'100%'">
		<div id="ta" style="height:80px;overflow:hidden">
			bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
		</div>
		<span style="cursor:pointer;color:blue" onclick="document.getElementById('ta').style.height = '100%'">Читать далее...</span>
	</div>
	Еще какой-то текст....
</body>
</html>

Можно ли в этом примере сделать чтобы "Читать далее" Не отображалась если текст помещается в 80px, а также если он уже был раскрыт?
И самое главное как сделать автоуменьшение блока, если текст занимает меньше чем 80px?
Возможно это уже здесь где-то обсуждалось, но я к сожалению не смог найти...

Имеет один недостаток если высота контента равна 80 будет показываться кнопка -можно убрать подобрав размер шрифта и межстрочный интервал
1 задaть max-height =80, overflow-y =hidden;
2 при нажатии на кнопку убирать max-height
3 показывать не показывать кнопку -если высота блока меньше 80 -не показывать кнопку
по поводу не показывать -если раскрыт-скрывать \изменять при нажатии на кнопку

Алгоритм мне понятен... Но мне бы javascript наброски хотя бы, т.к. в нем я полный ноль, или какое-то другое готовое решение (наверняка оно есть)!
Подобрать размер шрифта и межстрочный интервал не получится, т.к. при этом теряется весь смысл отформатированного текста вводимого пользователем в cleditor-е...

Вот пример на jQuery

<html>
<head>
    <script language="JavaScript" src="../js/jquery.min.js"></script>
</head>    
<script>
    $(function(){
        if($('#ta').length){
            blok_height = Number($('#ta').css('height').replace('px',''));
             
            if(blok_height > 80){
               $('#ta').css('max-height','80px');
               $('.read-next').show();  
            } 
       }
    });
    
    $('.read-next').live('click', function(){
        
        if($('#ta').css('max-height') != 'none'){
           $('#ta').css('max-height','');
           $(this).text('Скрыть');
        } else {
           $('#ta').css('max-height','80px');     
           $(this).text('Читать далее...');
        }
        
        return false;
    });
</script>
<body>
	<div style="height:'100%'">
		<div id="ta" style="overflow:hidden">
			Ребята! Очень надеюсь на Вашу помощь!                                 <br />
Имеется большой кусок текста с html-тегами. Как сделать так,                      <br />
чтоб была видна только его верхняя часть (в пределах 80px),                       <br />
а остальная часть появлялась при нажатии на                                       <br />
 кнопку "Ч                                                                        <br />
итать далее..." (без перезагрузки страницы).                                      <br />
Находил несколько решений, но к сожалению не                                      <br />
одно из них не подошло,                                                           <br />
т.к. во всех этих решениях предполагает                                           <br />
                                                                                  <br />
ся наличие двух частей - то что должно б                                          <br />
ыть отображено и то, что должно быть скрыто.                                      <br />
Самый подходящий вариант который был найден выглядет следующим образом:           <br />
                                                                                  <br />
Можно ли в этом примере сделать чтобы "Читать далее" Н                            <br />
е отображалась если текст помещается в 80px, а также если он уже был раскрыт?     <br />
И самое главное как сделать автоуменьшение блока, если                            <br />
 текст занимает меньше чем 80px?                                                  <br />
Возможно это уже здесь где-то обсуждалось, но я к сожалению не смог найти...      <br />
		</div>		
		<a class="read-next" style="display:none;" href="#">Читать далее...</a>
	</div>
</body>
</html>

вот без jQuery

<script>
    window.onload = function(){
        blok = document.getElementById('ta');
        parent = blok.parentNode;
        blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
        
        if(blok_height > 80){
            blok.style.maxHeight = '80px';
            link = parent.getElementsByClassName('read-next')[0];
            link.style.display = 'inline'; 
                        
            link.onclick = function(){
                                
                if(blok.style.maxHeight){
                   blok.style.maxHeight = ''
                   link.innerHTML = 'Скрыть';
                } else {
                   blok.style.maxHeight = '80px';
                   link.innerHTML = 'Читать далее...';                   
                }
                
                return false;
            } 
        
        }
    }
</script>

Спасибо огромное! Работает как надо (Пробовал 1-ый вариант)! НО только работает для одного блока :(
Таких блоков на странице будет n-ое количество, забыл это сразу упомянуть...
Попробовал поэксперементировать с id, но я так понял Вы его в скрипте жестко привязали!?

да в этом примере к id жестко привязан, для многоблочного варианта поменяйте id на класс и всё делать в цикле

вот вариант для многоблочного использования на jQuery

$(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;
    });

В общем ситуация получается следующая... Если блок один то все нормально работает... Но если блоков несколько то отображается ссылка "Читать далее" у тех блоков у которых она появлятся не должна...

<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>

ща поправим

$(bloks_total[i]).parent().find('.read-next').show(); вот это вставь вместо записи на 14 строчке