How to expand truncated text onclick by using dotdotdot?

Question

I am using the jQuery dotdotdot truncation plugin dotdotdot.frebsite.nl

I want to truncate at max 2 lines. And when a user clicks on more, then it must show the full text (expand/de-truncate).

So far, I "only" manage to truncate my text. But not to "de-truncate" it.

Here is my code:

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p> $(document).ready(function(){ $('.truncate').dotdotdot({ ellipsis : '… ', watch : true, wrap : 'letter', height : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines lastCharacter: { remove: [ ' ', ',', ';', '.', '!', '?' ], noEllipsis: [] }, after: "a.read-more" }); });

Live demo jsfiddle.net/NSnxe/1

When a user clicks "more," I want the full text to expand and 'de-truncate'. — cusejuice
– cusejuice, Commented Sep 25, 2013 at 22:09
Note that the values you have for lastCharacter option are the same as the default ones. Hence this part of the code is irrelevant. — Adri w Ukraine
– Adri w Ukraine, Commented Mar 17, 2015 at 14:40
possible duplicate of Read More and Read Less with dotdotdot jQuery — Adri w Ukraine
– Adri w Ukraine, Commented Mar 18, 2015 at 9:56
I added a complete answer to the same question on stackoverflow.com/questions/25187774/… — Adri w Ukraine
– Adri w Ukraine, Commented Mar 18, 2015 at 9:57

Barbara Laird · Accepted Answer · 2013-09-25 22:23:53Z

6

You can send a destroy message to dotdotdot

$('a.read-more').on( 'click', function(event) { event.preventDefault(); $(this).parent().trigger("destroy"); });

http://jsfiddle.net/bhlaird/C5Ent/

answered Sep 25, 2013 at 22:23

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barbara Laird Over a year ago

@JoeAtzberger - I don't have 32, but it seems to be working fine in 33. What behavior are you seeing?

Joe Atzberger Over a year ago

Ah, I take it back. Must have just been my browser or my brain. Looks fine now.

izogfif Over a year ago

Does not work: Uncaught TypeError: $(...).dotdotdot is not a function

Barbara Laird Over a year ago

@izogfif - this plugin has changed significantly since 2013 and the dotdotdot.js file doesn't exist at it's previous location anymore. I suggest looking at dotdotdot.frebsite.nl for it's current usage

Collectives™ on Stack Overflow

How to expand truncated text onclick by using dotdotdot?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related