Thank you for pointing that out. I understand the issue you're experiencing. It's a bit tricky to address, but you can try using the code below. This approach might still cause a minor jump; however, it will initially display a minimized version before transitioning to the closed state. Give it a try while I work on finding a more seamless solution. Here’s the code: /* Initially hide the text editor */ .your-text-editor-selector { display: none; } jQuery(document).ready(function($) { // Initial state var isExpanded = false; var $textEditor = $('.your-text-editor-selector'); // Ensure this is your actual selector var $button = $('.your-button-selector a'); // Ensure this is your actual button selector // Apply initial height restriction $textEditor.css({ 'max-height': '100px', 'overflow': 'hidden', 'position': 'relative' // Add relative positioning }); // Add gradient overlay pseudo-element $textEditor.prepend(''); // Apply gradient overlay style $('.gradient-overlay').css({ 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%', 'background': 'linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%)', 'pointer-events': 'none' // Allow clicks to pass through the overlay }); // Reveal the text editor after applying initial styles $textEditor.show(); // Button hover effect $button.hover( function() { $(this).css('cursor', 'pointer'); // Set cursor to pointer on hover }, function() { $(this).css('cursor', 'auto'); // Reset cursor to default when not hovering } ); // Button click action $button.click(function() { if (isExpanded) { // Collapse $('.gradient-overlay').show(); // Show the gradient overlay $textEditor.animate({maxHeight: '100px'}, 500); // Animate height change isExpanded = false; $button.text('read More'); // Optionally change button text } else { // Expand $('.gradient-overlay').hide(); // Hide the gradient overlay var fullHeight = $textEditor.prop('scrollHeight') + 'px'; $textEditor.animate({maxHeight: fullHeight}, 500); // Animate height change isExpanded = true; $button.text('read Less'); // Optionally change button text } }); });

I'm not sure if I completely understood, but try running this code: jQuery(document).ready(function($) { // Initial state var isExpanded = false; var $textEditor = $('.your-text-editor-selector'); // Ensure this is your actual selector var $button = $('.your-button-selector a'); // Ensure this is your actual button selector // Apply initial height restriction $textEditor.css({ 'max-height': '50px', 'overflow': 'hidden', 'position': 'relative' // Add relative positioning }); // Add gradient overlay pseudo-element $textEditor.prepend(''); // Apply gradient overlay style $('.gradient-overlay').css({ 'position': 'absolute', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%', 'background': 'linear-gradient(to top, white 10%, transparent)', // Gradient color from white to transparent 'pointer-events': 'none' // Allow clicks to pass through the overlay }); // Button hover effect $button.hover( function() { $(this).css('cursor', 'pointer'); // Set cursor to pointer on hover }, function() { $(this).css('cursor', 'auto'); // Reset cursor to default when not hovering } ); // Button click action $button.click(function() { if (isExpanded) { // Collapse $('.gradient-overlay').show(); // Show the gradient overlay $textEditor.animate({maxHeight: '50px'}, 500); // Animate height change isExpanded = false; $button.text('read More'); // Optionally change button text } else { // Expand $('.gradient-overlay').hide(); // Hide the gradient overlay var fullHeight = $textEditor.prop('scrollHeight') + 'px'; $textEditor.animate({maxHeight: fullHeight}, 500); // Animate height change isExpanded = true; $button.text('read Less'); // Optionally change button text } }); });

@@crocomentor I mean, instead of the blur, Add a gradient bottom to top (white to transparent) when it's fold, and when it's unfold to make the gradient disappear so ir will not stay on the text

did you check the code:this is how the final result looks prnt.sc/wni2zINDZXkJ

@@crocomentor no sorry I didn't saw all the code, i saw the comment on mobile and didn't saw it all, i will check it and update you. I just need to put this script code instead of the one from your site right?

filenewcreate.com/unfold-text-editor/