Jak vytvořit efekt „Zobrazit více“ kde se po kliknutí rozroluje dodatečný obsah? V daném kódu je nastavený i overlay, který způsobí, že poslední řádek bude lehce rozmazaný, aby to evokovalo pocit pokračujícího textu.
Kód lze i editovat, můžete si změnit názvy tlačítek nebo pomocí pixelů změnit, kdy se text začne zalamovat.
Poznámky:
Kód je určený pro Oxygen builder, takže pokud chcete kód aplikovat na nějaký váš div, ve kterém je text, který se má skrýt, tak je potřeba v CSS a JS smazat „.ct-div-block“ ze třídy „.ct-div-block.ap-div-show-more“. Pokud používáte nějaký jiný builder, tak je dost možné, že bude mít defaultně jinou třídu, tak je potřeba to pozměnit.
Javascript
document.addEventListener('DOMContentLoaded', function() {
var divBlocks = document.querySelectorAll('.ct-div-block.ap-div-show-more');
divBlocks.forEach(function(divBlock) {
var contentWrapper = document.createElement('div');
contentWrapper.className = 'ap-show-more-content-wrapper';
while (divBlock.firstChild) {
contentWrapper.appendChild(divBlock.firstChild);
}
divBlock.appendChild(contentWrapper);
var blurOverlay = document.createElement('div');
blurOverlay.className = 'ap-show-more-overlay';
contentWrapper.appendChild(blurOverlay);
var showMoreBtn = document.createElement('a');
showMoreBtn.className = 'ap-btn-show-more';
showMoreBtn.innerText = 'Zobrazit více';
divBlock.appendChild(showMoreBtn);
var originalHeight = contentWrapper.style.maxHeight;
contentWrapper.style.maxHeight = 'none';
var contentHeight = contentWrapper.scrollHeight;
contentWrapper.style.maxHeight = originalHeight;
if (contentHeight > 150) {
showMoreBtn.style.display = 'block';
contentWrapper.style.maxHeight = '150px'; // Nastavení počáteční max výšky
contentWrapper.style.overflow = 'hidden'; // Skrytí přetečeného obsahu
blurOverlay.style.display = 'block'; // Zobrazení překrytí
blurOverlay.style.height = (contentHeight - 150) + 'px'; // Nastavení výšky překrytí
}
showMoreBtn.addEventListener('click', function() {
if (contentWrapper.classList.contains('expanded')) {
contentWrapper.classList.remove('expanded');
contentWrapper.style.maxHeight = '150px';
showMoreBtn.innerText = 'Zobrazit více';
blurOverlay.style.display = 'block'; // Zobrazení překrytí
blurOverlay.style.height = (contentHeight - 150) + 'px'; // Nastavení výšky překrytí
} else {
contentWrapper.classList.add('expanded');
contentWrapper.style.maxHeight = contentHeight + 'px';
showMoreBtn.innerText = 'Skrýt';
if (showMoreBtn.innerText === 'Skrýt') {
showMoreBtn.style.paddingTop = '10px'; // Přidání padding-top pouze pokud se tlačítko změní na "Skrýt"
} else {
showMoreBtn.style.paddingTop = '0'; // Odstranění padding-top pokud se tlačítko změní na "Zobrazit více"
}
blurOverlay.style.display = 'none'; // Skrytí překrytí
}
});
});
});
CSS
.ct-div-block.ap-div-show-more {
position: relative;
overflow: hidden;
padding-bottom: 30px;
}
.ap-show-more-content-wrapper {
transition: max-height 0.3s ease;
overflow: hidden;
position: relative;
}
.ap-btn-show-more {
position: relative;
margin-top: 0px; /* Umístění tlačítka pod obsah */
display: none; /* Skryté tlačítko, dokud není potřeba */
cursor: pointer;
font-size: 16px;
}
.ap-show-more-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px !important;
background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5));
pointer-events: none;
display: none;
}
HTML
<div class="ct-div-block ap-div-show-more">
<p> Zde bude text, který se skrývá </p>
</div>
Leave a Reply