jquery - find Nth word in paragraph, add an anchor, then hide remaining text..

Question

Hi

I need a way to force a "read more" type effect using jquery.

I suspect it will be rather difficult going about it this way but here we go.

Take this paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.

I want this:

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Click here to read more

<div class="hidden"> Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod. </div>

---

when "Click here" is read, the div "hidden" will slide in to view.

Unfortunately I can't control the output of this paragraph, so the entire paragraph will be output regardless. I need to attempt to use JQUERY or similar to select approx 20 characters, then append an anchor and a <div> to hide the rest of the text.

It may well be too complicated but i can't think of another way.

I repeat - I cannot change how the paragraph is output, but would like a way to try and simuluate a "read more".

thanks.

Answer 1

Here is a little thing I came up with.

<script language='javascript' type='text/javascript'>

$(document).ready(function() {
    $("#clicker").click(function() {
        var str = $("#test").html();
        var words = str.split(' ');
        var base = "";

        for (var i=0;i<20;i++) {
            base += words[i] + " ";
        }

        $("#test").html(base + "<a href='#'>Click here to read more</a>");
    });
});
</script>

<div id='test'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.
</div>
<a href='#' id='clicker'>Here</a>

Answer 2

Try something like this (demo):

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum nisi ut sapien tincidunt pretium. Maecenas vel mi eu dui feugiat hendrerit. In hac habitasse platea dictumst. Aliquam turpis velit, facilisis non euismod id, convallis vitae orci. Etiam rhoncus ante et risus sagittis euismod.</p>

Script

$('p').each(function(){
    var $this = $(this);
    $this
        // save the height of the paragraph
        .data('height', $this.height() )
        // Show only the top line of the paragraph
        .css({
            overflow: 'hidden',
            height  : $this.css('lineHeight')
        })
        // add a clickable message
        .after('<div class="more">Click to read More</div>');

        $this.next().click(function(){
            // When clicked, restore the original height of the paragraph
            $this.animate({ height: $this.data('height')}, 500);
            // Hide the clickable link
            $(this).hide();
    });
});

Answer 3

Don't bother making it yourself, just use ThreeDots: http://tpgblog.com/threedots/