<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter