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

כפתור קרא עוד – אלמנטור
לפעמים אנחנו נרצה להציג תוכן בטקסט שהוא מעט ארוך. אבל אנחנו לא רוצים שכל הטקסט יהיה גלוי אלא רק לאחר לחיצה על כפתור קרא עוד. 
ככה נבצע את זה שלב אחר שלב

איך עושים כפתור קרא עוד?

כאן רושמים הרבה טקסט כדי שיהיה לנו הרבה תוכן שנוכל לסגור את התוכן בלחיצה על כפתור קרא עוד. אנחנו נרשום עוד תוכן על מנת לעבות את התוכן קצת יותר 🙂 והשלבים הבאים חשובים להמשך התהליך

בשלב הראשוני נגרור אלמנט של עורך טקסט של אלמנטור ונשים בCSS Classes את הטקסט הבא –

elementor-text-editor

בצורה הבאה:

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

לאחר מכן נגרור וידג'ט של HTML בדיוק מתחת לטקסט ונדביק את הקוד הבא

				
					<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>

				
			

כרגע הטקסט יוצג לכם עם כפתור של קרא עוד ברגע שתשמרו שינויים ותצפו בעמוד.

בשורה הבאה תוכלו לשנות את מספר התווים שהטקסט יהיה גלוי

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

חפשו את השורה הזאת ותשנו את ה200 ל300 למשל אם תרצו ש300 תווים יהיו גלויים.

וככה זה אמור להראות:

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *