JavaScript library that adds a 'Read more/less' functionality on the text blocks that is applied to.
// Initialise
var destroy = $readMoreJS({
target: '.container p',
wordsCount: 50, // Alternatively use `charactersCount` if you wish to truncate by characters' length.
toggle: true,
moreLink: 'Read more',
lessLink: 'Read less',
linkClass: 'rm-link-classname'
});
// Bring back to initial state if no longer needed.
destroy();| Param | Type | Default | Description |
|---|---|---|---|
| target | String |
"" | CSS selector of the HTMLElement that contains the text content to be truncated (any CSS selector, eg: "#", "."). |
| wordsCount1 | Number |
undefined |
The number of words to display before the "Read more" link. Has no effect if the number provided is greater than the actual words length. |
| charactersCount1 | Number |
undefined |
The number of characters to display before the "Read more" link. Has no effect if the number provided is greater than the actual characters length. |
| toggle | Boolean |
true | If true, the user can toggle between "Read more" and "Read less", otherwise when they click once on "Read more" link, they will not be able to display less content again. |
| moreLink | String |
"Read more" | The text of "Read more" link. HTML strings are supported, eg <div>Read more</div>. |
| lessLink | String |
"Read less" | The text of "Read less" link. HTML strings are supported, eg <div>Read less</div>. |
| linkClass | String |
"" | A class name that is applied on the "Read more/less" link, mostly for styling purposes. |
1 If both options wordsCount and charactersCount are used at the same time, the wordsCount option takes precedence and the charactersCount is just ignored. Use only one of the options for more predictable behaviour.
For API updates and breaking changes, check the CHANGELOG.