Read more button for Prestashop category

				
					/*
 * Custom code goes here.
 * A template should always ship with an empty custom.js
 */

$(document).ready( function() { / * to make sure the script runs after page load * /

	$ ('.text-muted').each(function(event){ / * select all divs with the item class * /

		var max_length = 200 ; / * set the max content length before a read more link will be added * /

		if ( $(this).html().length > max_length ) { / * check for content length * /
			var short_content 	 = fixhtml( $(this).html().substr(0,max_length),'less_text');
			
			var long_content	 = fixhtml($(this).html(),'more_text'); 
			var readmore = btnhtml($( "#readmore" ).val(),'read_more');
			var readless = btnhtml($( "#readless" ).val(),'read_less');
			$(this).html("");
			$(this).append(short_content );
			$(this).append( readmore );
			$(this).append( long_content);
			$(this).append( readless );
			
			$(this).find( '.less_text' ).show ();
			$(this).find( '.read_more' ).show();
			$(this).find( '.read_less' ).hide();
			$(this).find( '.more_text' ).hide ();

			$(document).on('click','.read_more',function(event){ / * find the a.read_more element within the new html and bind the following code to it * /

				event.preventDefault(); / * prevent the a from changing the url * /
				$(this).hide(); / * hide the read more button * /
				$(this).parents( '.text-muted' ).find( '.read_less' ).show(); / * show the read less button * /
				$(this).parents( '.text-muted' ).find( '.more_text' ).show(); / * show the .more_text span * /
				$(this).parents( '.text-muted' ).find( '.less_text' ).hide(); / * hide the short text span * /

			});

			$(document).on('click','.read_less',function(event){ / * find the a.read_more element within the new html and bind the following code to it * /
				event.preventDefault(); / * prevent the a from changing the url * /
				$(this).parents( '.text-muted' ).find( '.read_more' ).show(); / * show the read more button * /
				$( this ).parents( '.text-muted' ).find( '.read_less' ).hide(); / * hide the read more button * /
				$( this ).parents( '.text-muted' ).find( '.more_text' ).hide (); / * hide the .more_text span * /
				$( this ).parents( '.text-muted' ).find( '.less_text' ).show (); / * show the short text span * /

			});
		}

	});

});

function fixhtml ( html, classname ) { 
	const $div = document.createElement('div');
		$div.innerHTML = html;
		$div.classList.add(classname);
		console.log($($div));
 	return ($($div)); 
}

function btnhtml ( html, classname ) { 
	const $a = document.createElement('a');
		$a.innerHTML = html;
		$a.classList.add(classname);
 	return ($($a)); 
}