JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

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

JavaScript

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