הוספת כפתור קרא עוד

PHOTO EMBED

Thu Dec 15 2022 19:24:27 GMT+0000 (Coordinated Universal Time)

Saved by @Shesek

<script>
jQuery('.text-btn').click(function(){
        jQuery(this).toggleClass('open');
        jQuery(this).prev('.text-box').toggleClass('open');
});
</script>
<style>
  /*עיצוב קופסת טקסט לפני ואחרי*/
.text-box.open {
    max-height: auto;
    -webkit-line-clamp: unset;
    transition: all 0.3s ease;
}
 
.text-box {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8; /*מספר שורות שרוצים להראות*/
    line-height: 1.5;        /* fallback */
    max-height: 3;       /* גובה השורה כפול מספר השורות */
    margin-bottom: 10px;
    transition: all 0.3s ease;
}
 
/*סיבוב חץ למטה שצמוד לכפתור לפני ואחרי*/
.text-btn.open i{
    rotate: 180deg;
    transition: all 0.3s ease;
}
 
.text-btn i{
    rotate: 0deg;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.text-btn i, .text-btn svg{
    width: unset;
}
 
.text-btn {
    cursor: pointer;
}

/*החלפת טקסט בכפתור לפני ואחרי*/
.elementor-button-content-wrapper{
    display: inline;
}
 
.text-btn .elementor-icon-wrapper:before{
    content: 'עוד';
    font-family: var(--e-global-typography-primary-font-family); 
    display: block;
}
 
.text-btn.open .elementor-icon-wrapper:before{
    content: 'פחות';
}
  
</style>
content_copyCOPY

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