הוספת הקלאסים המתאימים
אם הפעלתם את ה"קונטיינרים" החדש של אלמנטור, יש להכניס את התוכן לתוך קונטיינר פנימי.
לקונטיינר החיצוני (שמכיל את התוכן המוסתר ואת הכפתור) יש לתת את הקלאס seeplus-read-more__box-wrap ולקונטיינר הפנימי (שמכיל את התוכן המוסתר) יש לתת את הקלאס seeplus-read-more__box-content
אם לא הפעלתם את ה"קונטיינרים" החדש של אלמנטור יש לתת לאזור החיצוני את הקלאס seeplus-read-more__box-wrap ולעמודה / אזור-פנימי יש לתת את הקלאס seeplus-read-more__box-content
כמו"כ יש להוסיף כפתור (רגיל של אלמנטור) לכתוב "קרא עוד" (או כל טקסט אחר שתרצו, רק שימו לב שתצטרכו לשנות אותו גם בסקריפט בשורה 22), ולתת לו קלאס seeplus-read-more__btn מתחת לקונטיינר הפנימי (בתוך הקונטיינר החיצוני).
את הסקריפט הבא, יש להכניס בתחתית העמוד (Body) (אם אתם משתמשים ב Custom Code של אלמנטור, מומלץ לסמן את "טען jQuery").
הסקריפט שצריך להכניס:
jQuery(document).ready(function($) {
$('.seeplus-read-more__btn .elementor-button').click(function(e) {
const seeplusHeight = $(this).closest('.seeplus-read-more__btn').prev('.seeplus-read-more__box-wrap').children('.seeplus-read-more__box-content').height();
const seeplusWrap = $(this).closest('.seeplus-read-more__btn').prev('.seeplus-read-more__box-wrap');
const seeplusSpeed = 500;
if ($(window).width() > 767) {
var seeplusReadMoreClosedHeight = "400px";
} else {
var seeplusReadMoreClosedHeight = "200px";
}
e.preventDefault();
$(seeplusWrap).toggleClass("full");
if ($(seeplusWrap).hasClass("full")) {
$(seeplusWrap).animate({
height: seeplusHeight
}, seeplusSpeed);
$(this).text("קרא פחות");
} else {
$(seeplusWrap).animate({
height: seeplusReadMoreClosedHeight
}, seeplusSpeed);
$(this).text("קרא עוד");
}
});
});
שימו לב, שהגדרתי 3 משתנים מסוג const. אתם יכולים לשנות את הערכים של מהירות האנימציה ב seeplusSpeed (מוגדר בms -אלפיות שניה) ואת הגובה המקורי ב seeplusReadMoreClosedHeight. (הערך הראשון הוא למובייל, והשני לדסקטופ).
שימו לב, שנתתי ערכים נפרדים אם המסך הוא מעל 768 פיקסלים או פחות.
את הCSS הבא, יש להחיל על כל האתר. וכמו מקודם – תוכלו לשנות את ערך הגובה של התיבה.
קוד CSS לעיצוב והגרדיאנט לשקיפות
.seeplus-read-more__box-wrap {
height: 200px;
overflow: hidden;
margin-bottom: 20px;
/* המסיכה */
mask: linear-gradient(to top, transparent 0, black 70px);
-webkit-mask: linear-gradient(to top, transparent 0, black 70px);
mask-size: 100% calc(100%);
-webkit-mask-size: 100% calc(100%);
transition: -webkit-mask-size .5s ease-in-out;
}
@media (max-width: 767px){
.seeplus-read-more__box-wrap {
height: 50px;
}
}
/* המסיכה */
.seeplus-read-more__box-wrap.full {
mask-size: 100% calc(100% + 70px);
-webkit-mask-size: 100% calc(100% + 70px);
}
