כפתור קרא עוד – אלמנטור

				
					<script>
document.addEventListener('DOMContentLoaded', function() {
    const textWidgets = document.querySelectorAll('.elementor-text-editor');

    textWidgets.forEach((textWidget) => {
        const originalContent = textWidget.innerHTML.trim();
        if (!originalContent) return;

        const wrapper = document.createElement('div');
        wrapper.classList.add('read-more-wrapper');
        wrapper.innerHTML = `
            <div class="gradient-overlay"></div>
            <button class="read-more-btn">קרא עוד</button>
            <div class="truncated-text"></div>
            <div class="full-text">${originalContent}</div>
        `;

        textWidget.innerHTML = '';
        textWidget.appendChild(wrapper);

        const readMoreBtn = wrapper.querySelector('.read-more-btn');
        const truncatedText = wrapper.querySelector('.truncated-text');
        const fullText = wrapper.querySelector('.full-text');

        truncatedText.innerHTML = originalContent.slice(0, 200) + '...';

        readMoreBtn.onclick = function() {
            const isExpanded = wrapper.classList.toggle('expanded');
            readMoreBtn.textContent = isExpanded ? 'סגור' : 'קרא עוד';
            fullText.style.maxHeight = isExpanded ? fullText.scrollHeight + 'px' : '0';

            // שינוי צבע הכפתור לאחר לחיצה
            readMoreBtn.style.backgroundColor = isExpanded ? '#00C5B6' : '#000'; // צבע חדש כאשר התוכן מורחב
        };
    });
});
</script>

<style>
.read-more-wrapper {
    position: relative;
    overflow: hidden;
}
.truncated-text,
.full-text {
    margin-bottom: 14px; 
}
.full-text {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}
.read-more-wrapper.expanded .truncated-text {
    display: none;
}
.read-more-wrapper.expanded .full-text {
    max-height: 2000px; 
}
.gradient-overlay {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.read-more-wrapper.expanded .gradient-overlay {
    opacity: 0;
}
.read-more-btn {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 5px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.read-more-btn:hover {
    background-color: #00C5B6;
}
</style>