Jak vytvořit efekt „Zobrazit více“

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>