JSFiddle - React, Tailwind, and code Playground

by stamoer

HTML

<div class="prop_text">
    <p><strong>Инструкции по настройке беспроводного соединения </strong>
    </p>
    <p><strong>Инструкции по настройке беспроводного соединения </strong>
    </p>
    <p><strong>Инструкции по настройке беспроводного соединения </strong>
    </p>
    <p><strong>Инструкции по настройке беспроводного соединения </strong>
    </p>
</div>
<br>
<div id="slide">Развернуть</div>

CSS

.prop_text {
    height: 65px;
    overflow:hidden;
    position: relative;
}
.prop_text:after {
    content: " ";
    display: block;
    position: absolute;
    height: 30px;
    left: 0;
    bottom: 0;
    right: 0;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 99%);
}
#slide {
    cursor: pointer;
}

JavaScript

var heightBlock = 65;
$('#slide').click(function () {

    var block = $('.prop_text'),
        height = block.height();

    block.css({
        'height': 'auto'
    });
    var realHeight = block.outerHeight(true);

    block.css({
        'height': height
    });

    if (height == heightBlock) {
        block.animate({
            height: realHeight
        }, 600);
    } else {
        block.animate({
            height: heightBlock
        }, 400);
    }

});