Read more button at short description

[medred]

Hello.

 

I was wondering if it is possible to add a “read more” button at short description of a product to display more text.  I mostly want this to work at product category list page.

 

Examples: https://i.imgsafe.org/e042f0e21f.jpg

https://codepen.io/Idered/pen/AeBgF

 

Thanks in advance for any replies.  

Edited January 5, 2017 by medred (see edit history)

[Knowband Plugins]

Try adding the following code in the /themes/default-bootstrap/js/global.js file that is loaded on product listing pages.

 

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



$('#short_description_block').each(function(event){ /* select all divs with the item class */



var max_length = 150; /* 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  = $(this).html().substr(0,max_length); /* split the content in two parts */

var long_content = $(this).html().substr(max_length);



$(this).html(short_content+

 '<a href="#" class="read_more"><br/>Read More</a>'+

 '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */



$(this).find('a.read_more').click(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('.item').find('.more_text').show(); /* show the .more_text span */



});



}



});





});

[medred]

Thank you very much i will try it

[امیر]

this code had problem