Unfold Effect (Text Editor)

[@eafdafev]

Great tutorial, thank you. Here is the minor issue I'm experiencing and an example. I have a large hero image with a text container on the left side of the page that uses your code to expand the text. When the webpage initially loads, the entire length of text flashes all the way open and then closes up. Is there a way to prevent this flash of all the text as the page loads. Im using WP rocket to speed up the site, I thought I would mention that in case you're aware of a conflict that might cause this minor issue. Thanks

[@crocomentor]

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 } }); });

[@PintoTV]

Amazing tutorial!!! Thank you very much for this❤ Q: can i change the blur effect with gradient white to transparent which will be hidden when it open?

[@crocomentor]

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 } }); });

[@PintoTV]

@@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

[@crocomentor]

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

[@PintoTV]

@@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?

[@crocomentor]

filenewcreate.com/unfold-text-editor/