Insert a Read More with jQuery

You can’t use jquery shorthand in WordPress – for example – $(this).outerHeight(); has to be jQuery(this).outerHeight();

Hi cukeving, thank you for replying.

Looking at the code, I have changed but I still cannot have the funcionality. Could you tell me which parts would you change in that script to get it working on wordpress?

Thanks in advance,

I’m not an expert – i think there were only 3 places in your code that needed changing:

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

jQuery(“.sidebar-box .button”).click(function() {

totalHeight = 0

$el = jQuery(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find(“p:not(‘.read-more’)”);

// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += jQuery(this).outerHeight();
});

$up
.css({
// Set height to prevent instant jumpdown when max height is removed
“height”: $up.height(),
“max-height”: 9999
})
.animate({
“height”: totalHeight
});

// fade out read-more
$p.fadeOut();

// prevent jump-down
return false;

});

It would also help if you could post a link to a page that shows the issue.

Hi stephencottontail,

I got it from here: https://css-tricks.com/text-fade-read-more/

And there is a demo here:
https://css-tricks.com/examples/ReadMoreFade/

Hi cukeving, thanks! But tested in my website and still behaves as I don’t have any script.

But it’s okay, even though I think it’s strange how there are no actual plugins for this.

Sorry, I wanted you to post a link to a page on your site that isn’t working correctly. How are you adding the script to your site?

Hi stephencottontail. I just discovered that was because my wordpress instalation was not calling jquery so the function did not work properly.
It was in my local test server.
As I don’t know yet how to call only on posts and pages I put the jquery calling it inside a widget with condition of visibility for pages and posts, and the css inside my child theme style.css. The only thing I need to do is to open that div and put the text inside :).

Thank you for helping me.