Question

Could you please help me with this code? I was looking for an asnwer here but its a bit hard for me as I’m a beginner in jquery programming. What I’m trying to do here is to REPLACE the (‘read more…’) text after it’s pressed with (‘read less…’) for example. I was trying to do it but it fails over and over again. I found other posts here about this, but I would like to use the script I made to train more with this. Any thoughts?
the code is here.

$(document).ready(function(){
var $posts = $('#items > div');
var maxHeight = 95;

$('a', $posts).live('click', function(){
    var $par = $(this).prev('p');

    var oH = parseInt($par.attr('class'));

    if($par.height() == oH){
        $par.animate({
            'height': maxHeight
        }, 'medium');
    }else{
        $par.animate({
            'height': oH
        }, 'medium');
    }
});

$posts.each(function(){
    if($('p', this).height() > maxHeight){

        $('p', this)
            .attr('class', $('p', this).height())
            .css('height', maxHeight+'px');
        $(this).append($('<a>').text('read more...'));
    }
});

});

What sort of code and where should I place to replace the ‘read more…’ with ‘read less’ after ‘read more…’ is pressed (it expands – animate down). Apart of replacing the text the script is working fine.. thank you for any help given. I’ll kindly appreciate all tips. Thank you in advance

Answer 1

You can change the link text by calling $(this).text('....');

if($par.height() == oH){
    $par.animate({
        'height': maxHeight
    }, 'medium');
    $(this).text('read more...');
}else{
    $par.animate({
        'height': oH
    }, 'medium');
    $(this).text('read less...');
}

Here is a demo