Animated Read More Plugin For Long Content - jQuery readMore.js

readMore.js is a small jQuery plugin to create a Read More button to expand a long block of text content shrunk by height. The overflowing text fades out at the bottom and has a custom "Read More" link.

How to use it:

1. To use the plugin, include the following JavaScript and CSS files on the web page.

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Include ReadMore -->
<script src="dist/readmore.js"></script>
<link rel="stylesheet" href="dist/readmore.css"></script>

2. Add the CSS class 'read-more' to the text container.

<div class="read-more">
  ...
</div>

3. Add a Read More link at the bottom of the text.

<div class="read-more">
  ...
  <p class="prompt">
    <a class="button" href="#">Read More</a>
  </p>
</div>

4. Call the function on the parent container and done.

$(".read-more").readMore();

5. Set the max height of text content to preserve.

$(".read-more").readMore({
  previewHeight: 120
});

6. Set the selector of the 'Read More' trigger.

$(".read-more").readMore({
  expandTrigger: ".prompt"
});

7. Set the transparent background color of the text fade effect.

$(".read-more").readMore({
  fadeColor1: "rgba(255,255,255,0)",
  fadeColor2: "rgba(255,255,255,1)"
});

---

This awesome jQuery plugin is developed by reececomo. For more Advanced Usages, please check the demo page or visit the official website.