<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script>
<style>
.read-more,
.read-less {
color: #000000 !important;
font-size: 18px;
font-weight: 300;
}
</style>
<script>
document.querySelector('.uc-long-zero1 .t396__artboard').addEventListener('artBoardRendered', function() {
let block = $('.uc-long-zero1'),
blockArtboard = block.find($('.t396__artboard')),
longTextWrap = block.find($('.zero-text')),
longText = longTextWrap.find($('.tn-atom')),
blockHeight = blockArtboard.height(),
textHeight = longTextWrap.height(),
rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
collapsedHeight = rowHeight * 20
textPosition = parseInt(longTextWrap.css('top'),10);
longTextWrap.css({'display':'flex','flex-direction':'column'});
blockArtboard.css('transition','all 0.2s ease');
function grow(bh,th,rh,ch,tp) {
blockArtboard.height(bh-th+rh+ch+tp);
};
longText.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>',
blockProcessed: function() {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
},
beforeToggle: function(trigger, element, expanded) {
if(!expanded) {
grow(blockHeight,0,rowHeight,0,0);
} else {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
$('html, body').animate({scrollTop: element.offset().top-textPosition}, {duration: 200});
}
}
});
});
</script>
<script>
document.querySelector('.uc-long-zero2 .t396__artboard').addEventListener('artBoardRendered', function() {
let block = $('.uc-long-zero2'),
blockArtboard = block.find($('.t396__artboard')),
longTextWrap = block.find($('.zero-text')),
longText = longTextWrap.find($('.tn-atom')),
blockHeight = blockArtboard.height(),
textHeight = longTextWrap.height(),
rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
collapsedHeight = rowHeight * 20
textPosition = parseInt(longTextWrap.css('top'),10);
longTextWrap.css({'display':'flex','flex-direction':'column'});
blockArtboard.css('transition','all 0.2s ease');
function grow(bh,th,rh,ch,tp) {
blockArtboard.height(bh-th+rh+ch+tp);
};
longText.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>',
blockProcessed: function() {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
},
beforeToggle: function(trigger, element, expanded) {
if(!expanded) {
grow(blockHeight,0,rowHeight,0,0);
} else {
grow(blockHeight,textHeight,rowHeight,collapsedHeight,0);
$('html, body').animate({scrollTop: element.offset().top-textPosition}, {duration: 200});
}
}
});
});
</script>