In jQuery how can I append a "Read More" link after about 162 char's, hide the rest and once the read more link is clicked, show it, clicked it... hide it.

I've looked at other questions, but the answers are having another div that has the rest of the text in it. I don't want to do that, really.

I am trying to a paragraph of text, thats all.

<p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna                                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        </p>

In jQuery how can I append a "Read More" link after about 162 char's, hide the rest and once the read more link is clicked, show it, clicked it... hide it.

I've looked at other questions, but the answers are having another div that has the rest of the text in it. I don't want to do that, really.

I am trying to a paragraph of text, thats all.

<p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna                                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        </p>

• javascript
• jquery

• 1 How do you want to do it then? I mean, you could use a SPAN instead of a DIV, if you want to be semantic. – Jared Farrish Commented Jul 10, 2011 at 20:49
• Well, I guess wrap the char's after the wanted amount and then hide? – kdevs3 Commented Jul 10, 2011 at 20:55
• you could use the overflow property with a div with fixed size (but you'll have to care about cross-browser patibility). Could you explain why you don't want another div ? – JMax Commented Jul 10, 2011 at 20:58
• That's one way. It's hard to tell, since you didn't post any code for your attempt(s). Are you needing to do client-side only (meaning injecting any markup could not be server-side)? What are you dealing with? You could truncate at 161 using Javascript and add the rest to a rel attribute for that, and trigger it on click of your (js-inserted) element, which could add/remove your rel text. There's really a bunch of different ways, considering what you're up against and what you've tried. :) – Jared Farrish Commented Jul 10, 2011 at 21:01
• The client knows little html. I was hoping he can just go in the code, which he doesn't mind and add much text as he want, without worrying about how many characters he has to have, etc. and have have the code do the hiding for it – kdevs3 Commented Jul 10, 2011 at 21:01

1 Answer 1

Here you go:

http://jsfiddle/AlienWebguy/9t3Z5/3/

HTML:

<div id="my_text" class="ellipsis">Lorem ipsum dolor sit amet ........ </div>

CSS:

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('http://seancannon./_test/ellipsis.xml#ellipsis');
}

#my_text {
    font-family:arial;
    color:#333;
    font-size:10px;
    width:80%;
}


#read_more {
    border:1px solid #000;
    background-color:#CCC;
    cursor:pointer;
    width:100px;
    text-align:center;
}

JQuery:

$('#read_more').click(function(){
    $('#my_text').toggleClass('ellipsis');
});

// Don't show Read More button if fewer than 500 chars
$(function(){
    if($('#my_text').html().length < 500)
    {
        $('#read_more').hide();
    }
});