javascript - Display read more button -

i want use read more button after text larger 300 characters.

i use jquery fix this, not working want.

var $j = jquery.noconflict(); $j('.reviewtekst').each(function() {     var $ptag = $j(this).find('p');     if($ptag.text().length > 300){         var shorttext = $ptag.text();         shorttext = shorttext.substring(0, 300);         $ptag.addclass('fullarticle').hide();         $ptag.append('<a class="read-less-link">lees minder</a>');         $j(this).append('<p class="preview">'+shorttext+'</p><div class="curtain-shadow"></div><a class="read-more-link">read more</a>');     } });  $j(document).on('click', '.read-more-link', function () {     $j(this).parent().hide().prev().show(); });  $j(document).on('click', '.read-less-link', function () {     $j(this).parent().hide().next().show(); }); 

see jsfiddle: https://jsfiddle.net/8cm67cun/1/

how can make work, display <a> class outside <p> class.

here updated version https://jsfiddle.net/8cm67cun/2/ works fine tag outside p

$j(document).on('click', '.read-more-link', function () {     $j(this).hide().parent().find('.preview').hide().prev().show(); });  $j(document).on('click', '.read-less-link', function () {     $j(this).parent().hide().next().show();     $j(this).parents('.reviewtekst').find('.read-more-link').show(); });