CODEWITHSUNDEEP
javascriptjqueryhtmlcssfade
Francisco Santos
Francisco Santos

Reputation: 11

Create a Read More that slides down the text

I have a problem. I have the following code in jsFiddle: https://jsfiddle.net/o7x14gzd/1/ for a creation of a button to read more with jquery. 

var $el, $ps, $up, totalHeight;

It should slide down the text til the end and fade out. More information on this site: https://css-tricks.com/text-fade-read-more/

I do not know where it is wrong but when the text is too big it does not show anything when you click "Read More".

Some of you already faced something like this or can tell me where is the error?

Upvotes: 1

Views: 730

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

1- You have to use outerHeight(true) instead of outerHeight() to calculate the real size of Paragraphs containing Margins.

2- instead of calculating all heights specially if you have list or images , I suggest this method: put the current height of parent element is a class say startheight and assign it to your view:

.srartheight{height:150px;}

to calculate the final height , use this method:

finalheight=$("#view").removeClass("startheight").height();
$("#view").addClass("startheight");

Upvotes: 0

Related Questions