Title: Insert a Read More with jQuery
Last modified: August 30, 2016

---

# Insert a Read More with jQuery

 *  Resolved [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * (@ffsantosjr)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/)
 * Hello all,
 * I am trying to figure out how to make a sliding read more to work with wordpress.
   My theme is Customizr.
 * The code is saved on fiddle: [https://jsfiddle.net/o7x14gzd/](https://jsfiddle.net/o7x14gzd/)
 * I tested there and it’s working, but I can’t put it to work on wordpress.
 * Can you help me how to?
 * Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [cukeving](https://wordpress.org/support/users/cukeving/)
 * (@cukeving)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675832)
 * You can’t use jquery shorthand in WordPress – for example – $(this).outerHeight();
   has to be jQuery(this).outerHeight();
 *  Thread Starter [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * (@ffsantosjr)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675843)
 * 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,
 *  [cukeving](https://wordpress.org/support/users/cukeving/)
 * (@cukeving)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675846)
 * 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;
 * });
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675849)
 * It would also help if you could post a link to a page that shows the issue.
 *  Thread Starter [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * (@ffsantosjr)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675850)
 * Hi stephencottontail,
 * I got it from here: [https://css-tricks.com/text-fade-read-more/](https://css-tricks.com/text-fade-read-more/)
 * And there is a demo here:
    [https://css-tricks.com/examples/ReadMoreFade/](https://css-tricks.com/examples/ReadMoreFade/)
 *  Thread Starter [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * (@ffsantosjr)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675853)
 * 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.
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675901)
 * 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?
 *  Thread Starter [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * (@ffsantosjr)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675909)
 * 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.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Insert a Read More with jQuery’ is closed to new replies.

## Tags

 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [more](https://wordpress.org/support/topic-tag/more/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 3 participants
 * Last reply from: [Francisco](https://wordpress.org/support/users/ffsantosjr/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/insert-a-read-more-with-jquery/#post-6675909)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics