Readmore.js Documentation

This is a JavaScript plugin that allows you to create a «Read more» functionality for your web content. It is designed to make long text blocks or content expandable using the «Read more» button for better interaction with users.

Features

Automatically adds a «Read more» button to long content blocks;
Smooth expansion and collapsing of content with customizable animations;
Customizable size of collapsed content, animation speed, and more;
Supports responsive design to activate functionality based on screen width.

Standard Installation

Step 1: Library Integration

The first step is to integrate the library into your project. You can do this by inserting the following code into the <head> section of your HTML page:


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

Replace «readmore.js» with the path to the file on your server.

Step 2: Initialization

Now that the «Readmore.js» library is integrated, you can start using it on your web page. For this, you will need JavaScript code to initialize the plugin. Here's an example of initialization code:


							initReadMore('.readmore');

Step 3: Adding a Class to an Element

Now that the script is initialized on your page, you can begin using it. Add a specific class, for example, .readmore, to your HTML markup. For instance:


							<div class="readmore">
								<!-- Your large content here -->
							</div>

The script will automatically detect these elements and add a «Read more» button for content hiding and revealing.

NPM Installation

Install the «readmore-javascript» library using npm:


						$ npm install readmore-javascript

After installation, you can import the library into your JavaScript code:


							import { initReadMore } from 'readmore-javascript';
							// Rest of the code

Options

You can configure the behavior of the «Read more» functionality by specifying an options object passed to the initReadMore function. Here is a detailed description of the available options:

collapsedHeight Set the size of the collapsed content (in pixels);
speed Set the animation speed for expanding or collapsing (in milliseconds);
heightMargin Set the margin for expansion (in pixels);
moreLink Customize the HTML for the «Read more» link;
lessLink Customize the HTML for the «Close» link;
maxWidth If a value is specified, the functionality is activated when the window width is equal to or less than the specified value. If no value is specified, the functionality is always active.

Advanced Usage

For more advanced usage and integration with other scripts or libraries, you can directly call the initReadMore function with your custom parameters.


							initReadMore('.custom-class', {
								// Custom parameters
							});

Example Configuration

Initialize the «Readmore.js» plugin in your JavaScript code. The code below demonstrates how to do it:


						document.addEventListener('DOMContentLoaded', function () {
							initReadMore('.readmore', {
								collapsedHeight: 200,  // Set the collapsed content size (in pixels)
								speed: 100,            // Set the animation speed (in milliseconds)
								heightMargin: 16,      // Set the margin for expansion (in pixels)
								moreLink: '<a href="#">Read more</a>',  // Customize the HTML for «Read more»
								lessLink: '<a href="#">Close</a>'      // Customize the HTML for «Close»
							}, 768);  // Optional: Set the maximum width for responsive behavior
						});