jQuery Read More
A lightweight jQuery plugin for creating animated Read more text.
Installation
You can install the file with NPM:
npm install jquery-read-more
Or import the file directly from a <script>
tag:
<script src="lib/jquery-read-more.min.js">
You can find the minified file in the git repository.
Attention! The plugin needs jQuery in order to work.
Initialisation
If you use a module syntax, you can import the plugin with
;
If you import the file, the plugin will be loaded when the DOM is ready.
Usage
Using the plugin is simple, let's show a minimal example:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut. Read More
Note the data-controller
attribute that points to the read more div
. Then activate the plugin from JS:
;
This will clip the text after two lines, adding the ellipsis if the text is truncated.
If the text is shorter than 2 lines, the read more div
will be hidden and no ellipsis is shown.
It is possible to apply .readMore({lines: x})
also to multiple elements at once.
Interactive Example
An interactive example is available here
Options
The complete list of options accepted as input:
Name | Required | Default Value | Description |
---|---|---|---|
lines | required | none | The number of lines to show before cutting the text. Is the only mandatory input. |
readMoreLabel | optional | "Read more" | Label for the read more / expand link |
readLessLabel | optional | "Read less" | Label for the read less / collapse link |
ellipsis | optional | "..." | Label for the text to add at the end in case of text clamping |
splitOn | optional | " " | String or regex, define a custom splitting character |
Methods
The plugin accepts also the following methods:
Name | Usage | Description |
---|---|---|
destroy | .readMore('destroy') |
Remove the plugin and reset the initial state |
Browser Compatibility
Tested and working on the following:
Chrome 86
Firefox 82
Internet Explorer 11
Edge 86
License
Support
If you like this plugin, you can support my work with a beer or a coffe