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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const textWidgets = document.querySelectorAll('.elementor-text-editor');
    
    textWidgets.forEach((textWidget, index) => {
        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');
        const gradientOverlay = wrapper.querySelector('.gradient-overlay');
        
       
        truncatedText.innerHTML = originalContent.slice(0, 300) + '...';
        
        readMoreBtn.addEventListener('click', function() {
            wrapper.classList.toggle('expanded');
            if (wrapper.classList.contains('expanded')) {
                readMoreBtn.textContent = 'סגור';
                setTimeout(() => {
                    fullText.style.maxHeight = fullText.scrollHeight + 'px';
                }, 10);
            } else {
                readMoreBtn.textContent = 'קרא עוד';
                fullText.style.maxHeight = '0';
            }
        });
    });
});
</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: #8b0000;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 5px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.read-more-btn:hover {
    background-color: #a52a2a;
}
</style>