Dynamically shortened Text with “Show More” link using jQuery

Jay says:

Nice, although maybe you should think about making it a plugin instead to allow reuse and configuration options. Something like http://pastie.org/1416794 (your code as a plugin, with reservations for jQuery-plugin-best-practise-abuse…)

karly says:

Hi, I noticed that whenever there’s a … and you click “More”, there’s a gap between the character, which would split up a whole word. Is there any way to fix that? Thanks!

Neeraj Dhiman says:

What awesome site!!!!!!!!! Help me very much on the form enhancement!! Thanks guys!!!

Jason Rastovski says:

Nice work -> The only change I had to make to this was to make sure that the split doesn’t occur within an HTML tag. For example, if you had some text that was wrapped with a “strong” tag, and the split ends up being in between the “o” and the “n” in the html tag, that tag would be broken. I changed it so that the code looks for a closing bracket (“>”) before an opening bracket (“<") in the 'remainder text'. If it is, it adds one to the number of characters to show & tries again.

Steve says:

Thanks for the code works pretty great for me.

I was wondering if anyone has/knows the best way to modify the function to hide a previously shown section when a new section has been clicked.

thanks again for the example!

julie says:

In your three examples it doubles the letter where the eclipse sits
so instead of displaying the correct word ‘sagittis’ it display ‘saagittis’.

Is there a quick way to fix this?

julie says:

Also may I see an example using the plug-in as this does not seem to work for me.
Great work by the way.

shibbir says:

Thanks a lot man.

Seyed says:

nice plugin…

Is there any option to customize the style of the more/less text with css..

i don’t the read more or less text as a standard link..

Landi says:

Patel,
works great so thank you! I have one possible request: is it possible to save /show the break lines (br) ?? Looking at the source it shows correctly:
line one
line two
line three

but in display I get: Line one. Line two. Line three.

Thanks

Jagan says:

I am not sure, why the plugin isn’t working for me.

The HTML tutorial works.

In your html turorial you have included a seperate file called

jquery-latest.js

which is not present in the plugin, i think this may be the reason, what do you think

Pratheepa says:

Nice

Michael says:

Great tutorial, just what I need. However, although it works in shortening my text and adds the ‘…’, the ‘more’ link is not appearing at all. Any ideas why this might be?

Thanks in advance for any help!

Stephanie says:

Tutorial is not working for me and not sure why? All text is showing on the page but seems as though the scripting language is not picking up because the more and less are not there and all the text is still showing when I text preview??? Not sure what I am missing?

Pablo Pazos says:

Hi, I’ve changed the plugin a little to solve the tag cutting problem:

http://pastebin.com/svRPehJJ

Hope that helps.

Cheers,
Pablo Pazos
http://code.google.com/p/yupp/

Yasir says:

This doesn’t work in a table

Yasir says:

It turns out that due to some content being loaded through ajax, the .live() function was attaching two events to the ‘show more’ link which fired the click event as soon as the it was clicked. Hence showing and then hiding suddenly, giving impression that it isn’t working.

Just add this
$(‘.morelink’).die();

before
$(‘.morelink’).live(‘click’, function(){ …..

Erasmus says:

I want to know if I may accept that all jQuery Code (Plugins etc) is Open Source and or Free to use for personal or commercial use? Thanks.

Ushang says:

The above doesnt work if the text comes from database using a php statement. Please help !!

steve says:

Add animation please

Josh says:

Has anybody figured out a solution for if the content contains HTML like list items or other tags it doesn’t seem to work if it’s not just plain text.

Eric Zipp says:

Using ‘jquery-1.8.1.min.js’, trying to create the ‘shortening’ (more/less) for text, displaying 115 characters. (also seem to have the same problem with ‘jquery-latest.js’)

Refer to : http://test.executivecaliber.com/moreless.htm for my test page, you can see at the junction of the displayed vs. no-displayed when you click MORE.

Paragraph one: “work” becomes “work..”
Paragraph two: “Moroc…” becomes “Moroc cco” Etc.

If I should be using a different jquery script… (or some other problem) please let me know.

Thank you,

Eric S. Zipp

Raj says:

The plugin works like a charm. Thank you :)

I have one question:
Why do we need the below line :
$this.parent().prev().toggle();

even though I comment this, the plugin works fine.

Raj

Melissa says:

This works great except . . . it’s backwards for me! When page is loaded all text shows with “more” link. When I click on “more” it collapses to show only 100 characters and then says “Less”. I’m not using the plugin, as I only need it for a single page. I’m a JS noob – any help?

Blaine says:

I tried using this on my wordpress site. Is there a way this would work for a single page in wordpress?

Velmurugan says:

My content also has html tags.. by this code wont work with that..

Can says:

@Melissa, I’ve been experiencing the same thing.. I was trying to figure out why this is working like that.

Can says:

@Melissa, ok I’ve just found the reason.. It is working in a div with {display: block; } style, I’ve removed this and now it works!.

Vikalp says:

It does not work when I use it for more than one element on a page. I get more/less links but nothing happens when I click them.

Dennis says:

Great job man! It workx without damage my SEO because of hidden text. The most scripts work with hidden hover of the hole content … its a good work … thanks a lot of!

Debra says:

Wish I understood this but it’s way over my head. I was just searching trying to find something to shorten my html or javascript code for affiliate links to use on facebook. I thought at first this might be the answer but I’m so confused at this point and think, instead, you might be talking about something else.! Wish I knew all you know about code, etc. I’m learning through trial and error at this point.
Debra @ childrenswellbeingblog.com

ross says:

Hi,

The css .morecontent isn’t doing what it needs to before the script loads?

Hope you can help?

Best,

Ross

Priyank says:

Thanks a lot. saved my time :)

David says:

It looks nice in the demo, but this does not seem to be a solution for multi-heading and multi-paragraph articles–which is what I need to be able to truncate until the user clicks “more”. In my case, the span is applying to the title alone, leaving the rest of the article visible. It’s a start, though, so I might be able to modify this into something that will work.

Iasin says:

This works great but I would like the text to be viewed by readers, how would the code work with left screen content instead of hidden or something like .visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

D says:

Has anyone given this a go within an asp:BoundField and ItemStyle-CssClass?

It works but, the other boundfields in the row get thrown off. The text in those fields get dropped to the bottom of the row (almost like vertial-align:bottom) until you click on that cell in the GUI where it fixes itself.

Thoughts?

Azab says:

Since live is deprecated in jQuery 1.9 have a look at this >> http://jsfiddle.net/dLRed/2/

Raymond Lobo says:

This works great except . . . it’s backwards for me! http://www.falconeye.com.my/management.html
When page is loaded all text shows with “click to hide” link. When I click on “click to hide” it collapses to show only 200 characters and then says “click for more”.
I’m a JS noob – any help?

Jason says:

doesn’t work for me if the content is being source from a .xml field. I have a {Complete_Description} that’s being sourced and no go any way to fix this?

{Complete_Description}

hira says:

how to implement if I am populating div with mysql query, as jquery run before the div is populated, so its not displaying any content at default,on more link is shows whole content.
code is like

<div class="comment more">
		<?php 
		foreach($result as $val)
		{
		 $cnm = $cn % 5;
		 if($cnm==0) {echo "</br>";}
		 //echo $val;
		?>
		
		<a onclick="add_key('<?php echo $val; ?>');" href="#"><?php echo $val.'&nbsp;'; ?></a> 
		 
	 	<?php $cn++;
	 	} ?></div>

Alex Hansford says:

Sadly this doesn’t work in jQuery 1.9.1 – as toggle() is depreciated too!

Can anyone suggest a workaround? I can’t find a replacement for this plugin which is 1.9.1 compatible.
Thanks, Alex

Sen says:

It doesn’t work when you have any html tags in it.

Mohiz Tank says:

There is no perfect solution for the cutted html i think right now.
what happens if want to add tables or images..????

Mohiz Tank says:

Best thing to do in case of HTML content is the height base solution.
Show only fixed height and every thing else will be hidden so cases like images will also get solved.
The real question is how to detect the height of the HTML content before applying the more-link so that it doesn’t get cut Awkwardly.

Jeremy says:

Plugin doesn’t work for me… Text gets shortened and show more link appears but nothing happens when you click link. Tried changing toggle to slideToggle as suggested above but still nada.

tested with
jQuery 2.0 and 1.72

Smash says:

Is it only me, that noticed then clicking on the “more” link, you got one or two letters duplicated.

eget laoreet sa… more
eget laoreet sa agittis, quam ……………. less
and should be
get laoreet sagittis, quam

As you see there is a space and “a” – so acctually two chars

Smash says:

I belive I found your error in the code.

var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp&nbsp<a href="" class="morelink">'+moretext+'</a></span>';

Should be

var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span>&nbsp&nbsp<a href="" class="morelink">'+moretext+'</a></span>'; 

Unneeded  

Priya Sharma says:

Hi Viral,

The code you have done has “moretext” in hyperlink format. When I’m trying it to do with button it is not working. I want to add a button beside the text instead of hyperlink and when we click on that button pop up window must open to view the full text. Can you help me on this..

Thanks

Saurabh says:

code fails if content is having html tags.
e.g

contentText => "A lovely presentation of short stemmed roses in mixed pastel shades (12, OR 24 Please Select) and filler wrapped in cellophane and trimmed with a bow.<i><b> Picture shown contains 12 roses</b></i>."

And now try this.. with following values..

 
    $(".comment").shorten({
                "showChars": 160,
                "moreText": "Read More"
            });

it fails.. due to html tags..
Any suggestion for this??

Thanks in advance.. ;)

Mark says:

I also noticed that, in addition to some characters repeating at the split, (which another commenter noted, The code was dropping the last character of the “hidden” text.

I changed the line

var h = content.substr(config.showChars , content.length - config.showChars); 

to

var h = content.substr(showChar); 

since javascript will return the rest of the string is no second parameter is passed to the substr() function

Vijay Bharwani says:

Hi,

Nice tutorial. There is a problem in your script, that when you are splitting the full content in 2, when we clicking on more, the last letter of the first sub string is getting double.
I mean before clicking on more, if ‘i’ is the last character , then if we click on more, it is showing 2 ‘i’. Please the 2 sub strings that u have made.
The suggested behavior is

var c = content.substr(0, showChar); 
            var h = content.substr(showChar, content.length - showChar); 

insted of

var c = content.substr(0, showChar); 
            var h = content.substr(showChar-1, content.length - showChar); 

pradeep says:

Hi, Nice code but not working in internet explorer version 9

Vali Hutchison says:

Similar problem for me as reported by others. If I have text in the shortener DIV with paragraph tags then it doesn’t work. It shows the less link with all the text first and then when you click the less link all the text disappears. Removing the tags makes it work – but be good to fix so can have paragraph tags.

Luke says:

Regarding your latest GitHub plugin, please don’t use off() and on() methods as these don’t work with the HTML5

<article>

tags ?

Jen says:

Hi,
I’m getting some weird behavior with the jquery-1.9.1.min.js. The button appears and then is labeled display:none. Anyone else seen this?

thanks
Jen

Ritu says:

Hi

The code is working but I have a problem that it is not working for label declared inside form view. Can any body help me?

Thanks

Sathish says:

What if I have some html inside the div. If I have some tags, is it going to cut off. (lets say my 99th character is so as per your example is this going to cut off <i … more?)

shaz says:

Hi, nice plugin, I want to ask how to add jquery easing effect on clicking ‘more’ ‘less’ Thanx

Chockolate says:

Yes, nice plugin and good tutorial, but as soon as there’s any markup in the div, it falls apart.

Jacques says:

Too bad this doesn’t work with dynamic data (text) from a database

heidi says:

Very nice plugin, but could you add a speed control to this plugin?

Rudy says:

For me, this plugin only works in IE, not in Mozilla firefox or Chrome
my jquery version is V1.7.1

added var J = noconflict()

any suggestions?

bibil says:

Hello, Thx for the tutorial!!
Is it possible to add some animation to the text ? i struggled but couldnt find how…

Many thx!!

Tushar kshirsagar says:

How i can shrink entire previous div if i am clicking on more link of
next div or any div i.e div that is not selected for now should get
shirked ..
Thanks in advance

Shawn says:

I was looking for it since long time as i want to show not full content, since my page has long content. Thanks for sharing this useful resource with us.

Hoffman says:

Hi,
I wanted to use the plugin on a wordpress website but it turn out the plugin is not working can you please help me on how i can integrate in to work with wordpress.
Best regards

Anitha Krishana says:

I have been trying to develop this as part of my php jquery training assignment with no success. but this tutorial helped me to get the assignment in few minutes. Just to note, i am new to php and jquery. thank you so much for detailed explanation.

-Anitha

Neil says:

nice plugin !!!
but how to change more and less text into image..
thankx in advance…….

fyeth says:

Hi there, thanks for a nice plugin. Its working but don’t know how to align “more” to the same line as the elipses like your samples. Mine looks like this.

some text…
more

What I want is

some text … more

mohamed says:

HI there it is possible to make us a video tutorial about Shortened Text With “Show More” Link Using JQuery and html and olso to use asp.net sory for

Sandeep says:

if there is link in the text, it’s showing the link path

pyretta says:

Hi there,
again: Many thanks to Viral Patel for this awesome Plugin!
If someone wants to use this plugin with more than one HTML-Element to show/hide and don’t want to click on a little button or something, here is my work around.
The HTML structure:

<div class="showmore">
    <div class="left_img">
        <img src="someimage.jpg" alt="someimage" title="someimage" />
    </div>
    <div class="shorten_txt">
    	<h1>Lorem ipsum dolor sit amet</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies.</p>
        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>consectetuer adipiscing elit</li>
        </ul>
    </div>
</div> 

The jQuery JS:

var showChar=50;
	var ellipsestext="[...]";	
	$('.showmore').each(function(){		
		$(this).find('.shorten_txt p').addClass('more_p').hide();
		$(this).find('.shorten_txt p:first').removeClass('more_p').show();
		$(this).find('.shorten_txt ul').addClass('more_p').hide();
//you can do this above with every other element
		var teaser = $(this).find('.shorten_txt p:first').html();
		var con_length = parseInt(teaser.length);
		var c = teaser.substr(0, showChar);		
		var h = teaser.substr(showChar, con_length - showChar);
		var html = '<span class="teaser_txt">'+c+'<span class="moreelipses">'+ellipsestext+
		'</span></span><span class="morecontent_txt">'+h
		+'</span>';				
		if(con_length > showChar){			
			$(this).find(".shorten_txt p:first").html(html);
			$(this).find(".shorten_txt p:first span.morecontent_txt").toggle();			
		}		
	});	
	$(".showmore").click(function(){
		if($(this).hasClass("less")){
			$(this).removeClass("less");
		}else{
			$(this).addClass("less");
			}
		$(this).find('.shorten_txt p:first span.moreelipses').toggle();
		$(this).find('.shorten_txt p:first span.morecontent_txt').toggle();
		$(this).find('.shorten_txt .more_p').toggle();
		return false;
	});
 

Now you just have to click on anywhere inside the “showmore” div and the teasertext will be shortened or will be enlarged. This is useful if you want it to use with mobile phones and touchscreens.

best regards,
pyretta

Manuel says:

I´ve just modified your code becuase i had problems with html contents.

Now instead of cutting and adding what function have cutted, function now cuts and shows this content at first and then when clicking “more” button it shows whole content.

$(function(){
	$.fn.shorten = function (settings) {
	
		var config = {
			showChars: 100,
			ellipsesText: "...",
			moreText: "more",
			lessText: "less"
		};

		if (settings) {
			$.extend(config, settings);
		}
		
		 $(document).on({click: function (){
		 
			var $this = $(this);
				if ($this.hasClass('less')) {
					$this.removeClass('less');
					$this.html(config.moreText);
					$('.morecontent').fadeOut(function(){
						$('.lesscontent').fadeIn();
						$('.moreellipses').show();
					});
				}else{
					$this.addClass('less');
					$this.html(config.lessText);
					$('.lesscontent').fadeOut(function() {
						$('.morecontent').fadeIn();
						$('.moreellipses').hide();
					});
				}
			}
		}, '.morelink');

		return this.each(function () {
			var $this = $(this);
			if($this.hasClass("shortened")) return;
			
			$this.addClass("shortened");
			var content = $this.html();
			if (content.length > config.showChars) {
				var c = content.substr(0, config.showChars);
				var html = '<span class="lesscontent">'+ c + '</span><span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent">' + content + '</span> <a href="#" class="morelink">' + config.moreText + '</a>';
				$this.html(html);
				$(".morecontent").hide();
			}
		});
		
	};

 });

Manuel says:

IM SORRY didn´t modified the post source code tag XD

$(function(){
	$.fn.shorten = function (settings) {
	
		var config = {
			showChars: 100,
			ellipsesText: "...",
			moreText: "more",
			lessText: "less"
		};

		if (settings) {
			$.extend(config, settings);
		}
		
		 $(document).on({click: function (){
		 
			var $this = $(this);
				if ($this.hasClass('less')) {
					$this.removeClass('less');
					$this.html(config.moreText);
					$('.morecontent').fadeOut(function(){
						$('.lesscontent').fadeIn();
						$('.moreellipses').show();
					});
				}else{
					$this.addClass('less');
					$this.html(config.lessText);
					$('.lesscontent').fadeOut(function() {
						$('.morecontent').fadeIn();
						$('.moreellipses').hide();
					});
				}
			}
		}, '.morelink');

		return this.each(function () {
			var $this = $(this);
			if($this.hasClass("shortened")) return;
			
			$this.addClass("shortened");
			var content = $this.html();
			if (content.length > config.showChars) {
				var c = content.substr(0, config.showChars);
				var html = '<span class="lesscontent">'+ c + '</span><span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent">' + content + '</span> <a href="#" class="morelink">' + config.moreText + '</a>';
				$this.html(html);
				$(".morecontent").hide();
			}
		});
		
	};

 });

Krishnakant Bhadoria says:

Hi ,

I am using shorten.js in my application for read more feature.However,I want to change the color of ‘Read More’ link after being visited.I tried changing the color for this link using ‘morelink’ class ,but it is not working fine.Can anyone please suggest a solution for this..

Louis says:

I want to display all the text but have the option of shortening it. How do I call that?

Rhys says:

I’m having the same issue as another poster where the “Read more” link is showing up on a different line rather than at the end of the text as displayed in the samples.

Current:
Lorem ipsum dolor sit amet…
Read more

Desired
Lorem ipsum dolor sit amet… Read more

Natty says:

This doesn’t work for nested elements. Any fix on that.

Rob says:

It seems to miss numbered lists from the hidden section.

It works ok with bulleted lists but not numbered lists.

Please advice.

bm says:

it’s not working

imesh says:

this doesn’t work for any browser.

Roman says:

It will be better to store separate config for each element, because I use different more and less words on one page, and after expanding/collapsing the more/less text is being override by last configured text

Shravan says:

This is not working when the text contains anchor tags .please verify the same by adding some anchor tags ,coz apsn tags are been added in anchor tag ,hence making the function not working

Sangram Desai says:

Need to set height:auto in jquery.shorton.js like below that is height:’0’+’%’ not working properly.so i done like
$this.parent().prev().animate({‘height’:’auto’}, function () { $this.parent().prev().prev().show(); }).hide(‘fast’);

Sangram Desai says:

$this.parent().prev().animate({‘height’:’auto’}, function () { $this.parent().prev().prev().show(); }).hide(‘fast’);

Laura says:

Is there any way to modify the code so that the ‘more’ button shows at the end of a word as apposed to the amount of characters? I can’t have the words being broken up. Any ideas what I would need to change this code to? {var showChar=200;

Thanks

Dampas says:

Hi,

the problem with formatted text is that this code breaks up the container.
Put this in code, that will resolve the problem for most of the cases:

var $type = $(this).prop('nodeName');

And then change this line:

var html = c + '' + config.ellipsesText + ' ' + h + '' + config.moreText + '';


Use this code to not break on paragraph tag (copy that to everything else – it will be nice to check up the .html to find out if we are in opening or closing tag and bail out of that, but I don’t have that much time):

poffset = content.substr(config.showChars, content.length - config.showChars).indexOf("") + 4;
var c = content.substr(0, config.showChars + poffset);
var h = content.substr(config.showChars + poffset, content.length - (config.showChars + poffset));


And use CSS coding for link and ellipses placement (it is at the top – play with it).

Dampas says:

What is the code tag?!? How can I add code with formatting?

Sigurd says:

Thank you very much, you save me lot of time!

Adhiraj Mukherji says:

Hi,

I added this code to my wordpress site, when i click on more the entire text is disappearing and only the ‘less’ link is showing, any idea why this is happening? any help will be appreciated.

Thanks.

Andreas says:

I’ve been trying to get this to work with a pre v 1.7 jQuery (sadly we are using an older version of the UI framework ZK, that comes with jQuery 1.6.4) and found that all that needs to be changed is:

$(document).off(“click”, ‘.morelink’);

changes to

$(‘.morelink’).die(“click”);

and

$(document).on({click: function() {…}, ‘.morelink’);

changes to

$(‘.morelink’).live({click: function() {…}});

In case anyone else is stuck with some ancient jQuery ;)

Gabe says:

Hi
I have integrated your code to a website and it is working well but the performance are not good: It took 1-2sec to open/close a text. And I notice a small CPU peak when clicking on the more/less link, on Chrome/Windows 7. It should be because of the “animate”
On the demo link on this page, the action is so much faster, but it doesn’t actually use this library!
Can we disabled the animation more or less like it is on this demo ?
Thanks

Schalk says:

Hi, Thank you so much for this, exactly what I was looking for!
One change I hope to make though. I would like to place the “more” link where ellipses is.
Can you put me in the right direction, please.

Ant says:

Anyone Know how to make it slide up and down slowly ?

Strahinja says:

Hey guys, Can somebody tell me where can I find some code for this problem but written in angularJS 2? I can’t find any solution similar to this but in angular? Any help would be appreciated. THx

Ben says:

I wanted the break to occur between words, so I added this to the JavaScript:

$(document).ready(function() {

        var ellipsestext = "...";
        var moretext = "mehr lesen";
        var lesstext = "einklappen";
        $('.more').each(function() {
var showChar = 250;


            var content = $(this).html();

            if(content.length > showChar) {

                var checkSpace = content.substr(showChar-1, showChar - showChar +1);
                while (checkSpace != ' '){
                    showChar = showChar+1;
                    checkSpace = content.substr(showChar-1, showChar - showChar +1);
                }

                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);

                var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });

Manju says:

HI , I am facing a small issue with this. This piece of code works brilliantly well if we are trying to show more/less in case of texts. But I am trying a show more/less an anchor tag. With this script, the anchor tag is converted into plain text and it isnt a link anymore.

Could anyone help me on this ?

virender yadav says:

Its very helpfull site for developer

king khan says:

Sir, how can we see hidden text like this *************? when we forgot facebook password and then we try to reset password with the help of mobile number. but facebook shows to me only two last digits of my mobile number like this ****************70 so how can we see complet number.plz help me.i shell be very thankful to you

Tobi says:

Worked well

Wahid says:

Thanks a lot bro! After 3 years, still does the job ;-)

Khatas says:

Any help if the text has Ul elements in the html.

test says:

hi,
this code works good but we have an issue here, can anyone please help me on this..
issue is:
.morecontent span is displaying while page loading and hides after page load
how can i fix this issue.

thanks

Tony Solserpiente says:

For a shortened script that works correctly by counting words instead of characters, this is the code, adapted from http://stackoverflow.com/questions/33175833/shortening-long-blocks-of-text-based-on-words-not-characters- To-display-to-read-m ::

*/

(function($) {
$.fn.shortenwords = function (settings) {

var config = {
maxWords: 100,
ellipsesText: "...",
moreText: "more",
lessText: "less"
};

if (settings) {
$.extend(config, settings);
}

$(document).off("click", '.morelink');

$(document).on({click: function () {

var $this = $(this);
if ($this.hasClass('less')) {
$this.removeClass('less');
$this.html(config.moreText);
} else {
$this.addClass('less');
$this.html(config.lessText);
}
$this.parent().prev().toggle(1200, "linear");
$this.prev().toggle();
return false;
}
}, '.morelink');

return this.each(function () {

var $this = $(this);
if($this.hasClass("shortened")) return;

$this.addClass("shortened");
var words = $(this).text().replace(".", ". ").replace(",", ", ").split(" ").filter(function(a){return a.trim()});

var arr = [];
var index = 0;

for(var i=0;i<words.length && arr.length+1 config.maxWords ) {
var c = words.slice(0,index).join(" ");
var h = words.slice(index, words.length).join(" ");
var html = c + '' + config.ellipsesText + '  ' + h + ' ' + config.moreText + '';
$this.html(html);
$(".morewords span").hide();
}
});

};

})(jQuery);

Tony Solserpiente says:

Sorry, I forgot it.
To pass the parameters to new shortenwords function:

$(selector).shortenwords({
"maxWords" : 20,
"moreText" : "more",
"lessText" : "less",
"ellipsesText" : "..."
});


muniyandi says:

its helpful thanks

Yoftahie Suleiman says:

Thank you.This is great article except for one minor correction
in the $(‘.more’).each(function () {, when you assign value to variable h
var h = content.substr(showChar – 1 , content.length – showChar);
this duplicates the last character before read more. Eg. instead of “id” it displys iid.
it can be fixed by code below,
var h = content.substr(showChar , content.length – showChar);

r k singh says:

This code is not working on multiple paragraph or div tag.

Simy says:

Fab work, very impressive.
Much appreciated.

safari mupe says:

Sorry for the disturb, I would like to use the script for a dynamic content got from Jquery only. I have a loop on json data from jquery and I display it dynamically by appending to . I would like to use the same script on that data only, I know it might request to embed the entire script in a function and call that function in each li. something like , var prg = ”+functMore(json.data)+”;
I can;t handle that easily. Can anyone provide an answer.
this is my full code.
$.ajax({
type: ‘GET’,
url: $(“#baseurl”).val() + “post/getData”,
success: function (json) {
$(“#postSec”).html(“”);
if (json.status) {
if (json.data.length > 0) {
for (var rec=0; rec<json.data.length; rec++){

var exp = '’;

exp += ”+
”+json.data[rec].postContent+”;

exp =+ ”+
”+
”;
$(“#postSec”).append(exp);
}
}
}
}
});

safari mupe says:

the tags are being removed, so I replace with
if (json.status) {
if (json.data.length > 0) {
for (var rec=0; rec<json.data.length; rec++){
var exp = "”+json.data[rec].postContent+””;
$(“#postsec”).append(exp);
}}}

Remy says:

you made my day

Mehak says:

Hi

I am facing issue in this plugin, I have text with html listing tags but it breaks so my load more functionality does not work, can you please help.

Thank you
Mehak

Tomasz says:

How do you put 4 different show-hide on the home page?
I changed .truncate to .truncate1 etc. – now the content opens for me, but it also hides immediately.

gavi says:

i made the div element and it works fine when i use normal text, but i tried to add some sql (inside php) to show a value of something in a sql table, but when i load the page it just says “more” and when i click it, it loads the value from the sql, but it is supposed to just shrink the value and then when you click more it is supposed to show the rest instead it shows nothing and then when you click “more” it shows all of it, this is because the sql is only loading after the js has run, trying to find a fix, please email me back, thanks

phptechie says:

This is very helpful article for me.I have been looking for such a content that helpful to me.