CI4 Olive

Cím

Kategória

Tartalom (HTML)

<div class="expand-box" id="myBox">
            <p>
                Ez az első paragrafus. Mindig ennek a magasságáig szeretnénk kezdetben mutatni a dobozt.
            </p>
            <p>
                Ez a második bekezdés, ami csak a bővítés után fog látszani. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            <p>
                Harmadik paragrafus, hogy legyen még több tartalom. Integer ullamcorper, massa id malesuada dictum, nulla nunc elementum mi.
            </p>
            
            <a href="https://example.com" class="btn btn-primary more-link">Tovább az oldalra</a>
            
            <span class="read-more" id="readMore">Bővebben</span>
        </div>

const box = document.getElementById("myBox");
                const readMore = document.getElementById("readMore");
                const firstParagraph = box.querySelector("p");

// mérjük az első paragrafus magasságát
                const initialHeight = firstParagraph.scrollHeight;
                box.style.maxHeight = initialHeight + 40 + "px";
                // console.log("box.style.maxHeight", box.style.maxHeight);
                // console.log("firstParagraph: ", firstParagraph);
                // console.log("initialHeight + 100 + px: ", initialHeight + 40 + "px");
                readMore.addEventListener("click", () => {
                    const fullHeight = box.scrollHeight + "px";
                    box.style.maxHeight = fullHeight;

box.addEventListener("transitionend", () => {
                        box.classList.add("expanded");
                        box.style.maxHeight = "none"; // hogy kövesse a tartalom magasságát
                    }, {once: true});
                });
            });

</script>

Categories