Show More - Show Less content in Elementor by using the GSAP

ob-show-more-show-less-gsap.js

;( function() { 

    document.addEventListener( 'DOMContentLoaded', unfold_content );
	
    function unfold_content() {
			
			let close_text = "Show Less";
			let the_unfolds = gsap.utils.toArray( '.ob-unfold' ); 
			
			the_unfolds.forEach( ( ob, i ) => { 
				
				ob.state = "closed";
				
				let the_content = ob.querySelector( '.ob-content' );
				let the_blanket = ob.querySelector( '.ob-blanket' );
				let the_content_child = the_content.querySelector( '.ob-content > div' );
				let the_blanket_object = '';
				let original_text = '';
				let closed_height = 0;
				
				try {
					the_blanket_object = ob.querySelector( '[data-unfold-height]' ); 
					original_text = the_blanket_object.innerHTML;
					closed_height = the_blanket_object.getAttribute( 'data-unfold-height' );
				} catch ( err ) {
					console.log( err );
					return;
				}
				
				gsap.set( the_content, { height: closed_height } );
			
				the_blanket.addEventListener( 'click', ( e ) => { 
					
					e.preventDefault();
					
					if( "closed" === ob.state ) {
						gsap.to( the_content, { 
							height: () => { return the_content_child.offsetHeight }, 
							duration: 0.3, 
							ease: 'power2.inOut', 
							onComplete: () => {
								ob.state = "opened";
							} 
						} );
						the_blanket_object.innerHTML = close_text;
					} else {
						gsap.to( the_content, { 
							height: closed_height, 
							duration: 0.3, 
							ease: 'power2.inOut', 
							onComplete: () => {
								ob.state = "closed";
							} 
						} );
						the_blanket_object.innerHTML = original_text;
					}

				} );
				
			} );
			
    }
  
} )();