Properly adding read_more / read_less links to paragraphs using jquery

Question

I have a bunch of paragraphs within a div and one of them has a read_more link. All the paragraphs that come after the read_more link within the same div are hidden by default.

When the read_more is clicked, it displays all these paragraphs that come after the read_more and adds a read_less link at the end of the last paragraph. When the read_less is clicked, it hides all the paragraphs until read_more, displays the read_more link again and hides itself.

I am almost there, please see it here: http://jsfiddle.net/g8tevwb1/

$('p').find('a.read_more').parent().nextAll().hide();

$('a.read_more').click(function(){
    $(this).parent().nextAll().show();
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).hide();
    return false;
});

$('a.read_less').click(function(){
    $(this).parent().prevUntil('a.read_more').hide();
    $(this).hide();
    return false;
});

I just dont manage to get the read_less working. Am I doing something wrong appending the read_less link in such way? I can manipulate it, change colors, etc but the click function doesnt work.

Its important that all this is happening within the div in which they are contained, as I have other paragraphs within other divs with other read_more buttons and I dont want them to be affected.

Any help is appreciated!

score 1 · Accepted Answer · edited May 23 '17 at 12:12

Since the read_less link is dynamically added, you must use the jQuery .on() method.

$('p').find('a.read_more').parent().nextAll().hide();

$('p').on('click', 'a.read_more', function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll('p').last().append('<a href="#" class="read_less">read less</a>');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('p').on('click', 'a.read_less', function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    $(this).remove();
    return false;
});

Fiddle

I've also corrected a small error inside read_less click callback. I think this is the behaviour you wanted. Here's a post related to dynamically added elements.

Note

If not strictly required, you can avoid adding and removing read_less link dynamically. This will simplify your code as follows

$('p').find('a.read_more').parent().nextAll().hide();

$('a.read_more').click(function(){
    $(this).parent().addClass('first');
    $(this).parent().nextAll().show();
    $(this).hide();
    return false;
});

$('a.read_less').click(function(){
    $(this).parent().prevUntil('p.first').andSelf().hide();
    $('a.read_more').show();
    return false;
});

Fiddle

Thanks a lot, I learned quite some things with this, I didnt know about `.on()` method to begin with. About the read_less click callback, I can't really call the `(p.first)` as the read_more link won't be necessarily in the first paragraph, that's why I wanted to use `prevUntil('a.read_more')`, but adding the class `first` solves that as well. On the other hand, I can't avoid adding the read_less dynamically, as the user will specify only a read_more tag and I need to do the calculation (where it begins, and where it ends) in the code. — user2089160, Jan 28 '15 at 13:26

Properly adding read_more / read_less links to paragraphs using jquery

1 Answers1