Readmore.js
A simple and effective solution in pure JS.

A smooth and responsive plugin in pure JavaScript for collapsing and expanding long text blocks. The "Read more" and "Close" buttons allow you to hide or show additional content, enhancing readability and saving space on the page. Perfect for mobile devices and convenient management of large amounts of text.

NOTE:

• The script does not depend on external libraries (such as jQuery).
• Content displayed with Readmore.js is fully accessible to search engines from the start, as the HTML structure remains unchanged.
  
  

DOCUMENTATION DETAILED:

Install NPM - Temporarily out of service

The recommended installation method is NPM. Install the latest version by the following command:

$ npm i @corgras/readmore-js

Then include it in your HTML:

<script src="/node_modules/@corgras/readmore-js/readmore.min.js"></script>

Install CDN - Temporarily out of service

You can also include this library from CDN:

<script src="https://cdn.jsdelivr.net/npm/@corgras/readmore-js@1.0.0/readmore.min.js"></script>

Alternative CDNs:

<script src="https://unpkg.com/@corgras/readmore-js@1.0.0/readmore.min.js"></script>

Install Manually

Download a zip of the latest release.

Import the readmore.min.js file by the <script> tag:

<script src="readmore.min.js"></script>

Usage

Initialization without additional parameters:

document.addEventListener('DOMContentLoaded', function () {
    initReadMore('.readmore');
});

Initialization with additional options for all screen sizes:

document.addEventListener('DOMContentLoaded', function () {
	initReadMore('.readmore', {
		collapsedHeight: 200,
		speed: 100,
		heightMargin: 16,
		moreLink: '<a href="#">Read More</a>',
		lessLink: '<a href="#">Close</a>'
	});
});

Initialization with additional parameters for specific screen width (e.g., 768px):

document.addEventListener('DOMContentLoaded', function () {
	initReadMore('.readmore', {
		collapsedHeight: 200,
		speed: 100,
		heightMargin: 16,
		moreLink: '<a href="#">Read More</a>',
		lessLink: '<a href="#">Close</a>'
	}, 768);
});

Options

• speed: 100 Defines the animation speed for changing the element's height (in milliseconds).
• collapsedHeight: 200 Sets the initial height of the content in a collapsed state (in pixels).
• heightMargin: 16 Additional height margin to ensure space when expanding the content (in pixels).
• moreLink: '<a href="#">Read more</a>' HTML content of the link or button displayed to expand hidden content.
• lessLink: '<a href="#">Close</a>' HTML content of the link or button displayed to collapse the content after expanding it.
• maxWidth Sets the maximum screen width in pixels at which the plugin will be activated. If the screen width exceeds this value, the plugin will not activate, and the "Read More" button will not display.
  
  

Browser Support

• Google Chrome: 💻 7.0+ | 📱 90+

• Internet Explorer: 💻 9.0+

• Microsoft Edge: 💻 Edge | 📱 Edge 90+

• Mozilla Firefox: 💻 4.0+ | 📱 89+

• Safari: 💻 5.1.4+ | 📱 14+

• Opera: 💻 12.0+ | 📱 76+
  
  

Donation

Readmore.js is an open source project licensed under the MIT license. It's completely free to use. However, it would be great if you buy me a cup of coffee once in a while to keep me awake :)