Made on
Tilda
<!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script> <script> $(document).ready(function() { let block = $('#rec123456789'),
longText = block.find($('.t-text')),
rowHeight = Math.round(parseInt(longText.css('line-height'),10)),
collapsedHeight = rowHeight * 3,
longTextClasses = longText.attr('class');
longText.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more">Подробнее</a>', lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less">Скрыть</a>'
});
});
</script> <!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-text --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script> <script> const makeReadmore = (target) => {
const rowHeight = Math.round(parseFloat(target.css('line-height').split('px')[0], 10));
collapsedHeight = rowHeight * 3,
longTextClasses = target.attr('class');
target.readmore({
speed: 200,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="' + longTextClasses + ' t-name read-more">Подробнее</a>', lessLink: '<a href="#read-less" class="' + longTextClasses + ' t-name read-less">Скрыть</a>'
});
}
$('.js-store-prod-btn').click(function() {
if ($(this).attr('href').indexOf('tproduct') !== -1) {
setTimeout(() => {
let block = $('.t-store__product-popup'),
longText = block.find($('.js-store-prod-all-text'));
makeReadmore(longText);
}, 500);
}
});
if (window.location.href.indexOf('tproduct') !== -1) {
setTimeout(() => {
let block = $('.t-store__product-snippet'),
longText = block.find($('.js-store-prod-all-text'));
makeReadmore(longText);
}, 500);
}
</script> <!-- Кнопка «Подробнее» для длинного текста | https://necodim.ru/tilda/collapsed-atom --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.1/readmore.js"></script> <script>
$('#rec736896306 .t396__artboard').on('artBoardRendered', function() {
const speed = 200;
const artboard = $(this);
const carrier = $(this).find('.t396__carrier');
const filter = $(this).find('.t396__filter');
const elem = $(this).find($('.collapsed'));
const atom = elem.find($('.tn-atom'));
const group = elem.closest($('.tn-group'));
const rowHeight = Math.round(parseInt(atom.css('line-height'),10));
const collapsedHeight = rowHeight * 3;
artboard.css('transition', `height ${speed}ms ease`);
carrier.css('transition', `height ${speed}ms ease`);
filter.css('transition', `height ${speed}ms ease`);
group.css('height', 'auto');
elem.css({'display': 'flex', 'flex-direction': 'column'});
function adjustArtboardHeight() {
const interval = setInterval(() => {
artboard.height(group.height());
artboard.attr('data-artboard-height', group.height());
artboard.attr('data-artboard-proxy-min-height', group.height());
artboard.attr('data-artboard-proxy-max-height', group.height());
carrier.height(group.height());
filter.height(group.height());
}, 50);
setTimeout(() => clearInterval(interval), speed + 100);
}
atom.readmore({
speed: speed,
collapsedHeight: collapsedHeight,
moreLink: '<a href="#read-more" class="t-name read-more">Подробнее</a>',
lessLink: '<a href="#read-less" class="t-name read-less">Скрыть</a>',
beforeToggle: function() {
adjustArtboardHeight();
}
});
adjustArtboardHeight();
});
</script>