הוספת כפתור קרא עוד
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
מבוסס על אלמנט עורך טקסט וכפתור עם אייקון של אלמנטור. לתת להם את הקלאסים הנכונים
Comments