प्रदर्शन और पढ़ें बटन

Question

टेक्स्ट के 300 वर्णों से बड़ा होने के बाद मैं एक और अधिक बटन का उपयोग करना चाहता हूं।

मैं इसे ठीक करने के लिए इस jQuery का उपयोग करता हूं, लेकिन यह काम नहीं कर रहा है जैसा मैं चाहता हूं।

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

इस JSFiddle देखें: https://jsfiddle.net/8cm67cun/1/

मैं इस काम कैसे कर सकते हैं, <p> class बाहर <a> class प्रदर्शित करने के लिए।

Answer 1

यहाँ अद्यतन किया जाता है संस्करण https://jsfiddle.net/8cm67cun/2/ अब यह पी के बाहर एक टैग के साथ ठीक काम करता है

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