Question

Working with an API that spits out the contents in p tags … but it gets too long. Thinking of hiding them upon reaching a limit of 400 characters, but that’s not a good idea since there is a possibility of it cutting through a HTML tag.

So I’m trying to hide the rest of the content after 3 paragraphs instead and with a text “Read More” that will unhide the rest of the content. How would one accomplish this?

Answer 1

<div><p></p><p></p><p></p><p></p><p></p>
    <a href="#readMore" class="readMore">Read More</a>
</div>

if you have this kind of structure, you can

$('div p:nth-child(3)').nextAll('p').hide();

and

$('a.readMore').click(function(){
    $(this).siblings('p').show();
    return false;
})

resources:
– .nextAll()