Readmore.js

A smooth and lightweight pure JavaScript plugin for collapsing long text blocks with "Read more" and "Close" buttons, enhancing readability and saving space, perfect for mobile devices.

Generate Convert Improve

Install / Use

/learn @corgras/Readmore.js

About this skill

Quality Score

0/100

README

<div align="center"> <a href="https://github.com/corgras/Readmore.js"> <img src="https://corgras.github.io/assets/images/logo.svg" alt="CORGRAS" width="80" height="80"> </a> <h1 align="center">Readmore.js<br>A simple and effective solution in pure JS.</h1> </div> <br> <div align="center"> <img alt="GitHub Release" src="https://img.shields.io/github/v/release/corgras/readmore.js?style=for-the-badge"> <img alt="Language Javascript" src="https://img.shields.io/badge/language-Javascript-yellow?style=for-the-badge"> <img alt="GitHub License" src="https://img.shields.io/github/license/corgras/readmore.js?style=for-the-badge"> <a href="https://www.paypal.com/donate/?hosted_button_id=DMETJT5YE55HN"><img alt="Donate" src="https://img.shields.io/badge/Donate-PayPal?style=for-the-badge&logo=paypal&label=PayPal&color=blue"></a> </div> <br> ReadMore.js is a lightweight and flexible JavaScript plugin for creating user-friendly expandable text blocks with "Read More" and "Hide" buttons. It optimizes the display of large amounts of content, improving readability and saving space on the page. The plugin is ideal for websites, blogs, news portals, and other projects where managing long texts on desktops and mobile devices is necessary. <br><br>

NOTE:

The plugin works standalone, requiring no third-party libraries such as jQuery..
All content remains accessible to search engines, as the plugin does not alter the HTML structure of the page. <br><br>

DOCUMENTATION DETAILED:

Install NPM

This method is ideal for projects using the npm package manager. Installing via NPM simplifies dependency management, library updates, and integration with modern JavaScript frameworks such as React, Vue.js, or Angular.

Run the following command in your terminal:

$ npm i @corgras/readmore-js

After installation, include the script in your project. For example, add it to your HTML file:

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

If you are using a module system, import the library in your JavaScript code (see sections below) <br>

<br>

Install CDN

Using a CDN (Content Delivery Network) allows you to quickly include Readmore.js without locally storing files. CDNs provide fast loading speeds due to caching and a global server network.

Add one of the following scripts to the <head> section or before the closing </body> tag:

CDN jsDelivr:

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

<br>

CDN Unpkg:

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

Install Node.js/CommonJS

For projects using CommonJS (e.g., in Node.js or with tools like Webpack), you can import the main Readmore.js function after installing via NPM.

Add the following code to your JavaScript file:

const initReadMore = require('@corgras/readmore-js');
// Initialization: initReadMore('.selector', { /* options */ });

Ensure your project is configured to work with CommonJS modules. <br>

<br>

Install ES Modules

For modern projects using ES modules (e.g., with Vite, Rollup, or modern versions of Webpack), import Readmore.js as a module after installing via NPM:

Add the following code to your JavaScript file:

import initReadMore from '@corgras/readmore-js';
// Initialization: initReadMore('.selector', { /* options */ });

Ensure your HTML file includes the type="module" attribute in the <script> tag if you are including the script directly.
Example of including with module type:

<script type="module">
	import initReadMore from './node_modules/@corgras/readmore-js/readmore.min.js';
	initReadMore('.content', { collapsedHeight: 200 });
</script>

Install Manually

If you are not using package managers, you can include Readmore.js by manually downloading the script file. This method gives you full control over the library version and does not rely on external tools.

Download a zip of the latest release.

Place the downloaded file in your project folder (e.g., /js/).
Include the script in your HTML file by adding the following code in the <head> section or before the closing </body> tag:

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

After inclusion, initialize the script by calling the initReadMore function. <br>

<br>

Usage

The Readmore.js plugin allows you to create a «Read More» functionality for any elements with textual content, such as <div>, <p>, <section>, or <article>. The script trims the content to a specified height and adds a button to expand/collapse the text. For initialization, use a CSS selector, such as the class .readmore, which should be added to the target elements. Ensure the element contains enough content so that its height exceeds the collapsedHeight parameter; otherwise, the button will not appear.

<div class="readmore">
	<p>Long content here...</p>
</div>

<br>

Initialization without additional parameters:

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

<br>

Initialization with Parameters:

document.addEventListener('DOMContentLoaded', function () {
	initReadMore('.readmore', {
		collapsedHeight: 200, // Height of the collapsed block in pixels
		speed: 400,          // Animation duration in milliseconds
		moreLink: '<span>Read More</span>', // Text for the expand button
		lessLink: '<span>Collapse</span>'   // Text for the collapse button
	});
});

<br>

Initialization with Responsive Settings:

document.addEventListener('DOMContentLoaded', function () {
	initReadMore('.readmore', {
		collapsedHeight: 200,
		speed: 400,
		moreLink: '<span>Read More</span>',
		lessLink: '<span>Collapse</span>',
		breakpoints: {
			576: { // For screens up to 576 pixels
				collapsedHeight: 100,
				speed: 200,
				moreLink: '<span>Details</span>',
				lessLink: '<span>Hide</span>'
			},
			768: { // For screens up to 768 pixels
				collapsedHeight: 150,
				speed: 300
			},
			1024: { // For screens up to 1024 pixels
				disableCollapse: true // Disable functionality
			}
		}
	});
});

<br>

Destroying the plugin:

const readmore = initReadMore('.readmore');
readmore.destroy(); // Removes event listeners and resets styles

Options

collapsedHeight: 250 Defines the initial height of collapsed content in pixels. If the content is shorter than this height, the «Read More» button is not displayed.
speed: 300 Sets the duration of the expand/collapse animation in milliseconds. For collapsing in animationMode: 'js' mode, the speed is halved.
moreLink: '<span>Read more</span>' HTML string for the «Read More» button displayed in the collapsed state. Inserted into a <button> element. For security, HTML is sanitized of potentially dangerous attributes.
lessLink: '<span>Close</span>' HTML string for the «Close» button displayed in the expanded state. Inserted into a <button> element. Supports sanitization of HTML from unsafe code.
hideButtonCollapse: true/false If true, the button is hidden after expanding the content, avoiding unnecessary interface elements..
animationMode: 'js' Defines the type of animation: js - Animation via JavaScript with smooth height transition. css - Animation via CSS, adds the .cs_readmore-animation class for styling.
animationType: 'ease-in-out' Defines the timing function for JavaScript-based animation (works with animationMode: 'js'). Options: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'.
scrollToTopOnCollapse: true/false If true, the page smoothly scrolls to the top of the content after collapsing, improving viewing convenience.
disableCollapse: true/false If true, disables the collapse function for an element or screen width range, displaying the full content.
breakpoints: {} Allows setting different parameter values based on screen width. Keys are the maximum screen width in pixels, values are an object with parameters. If the screen width exceeds the maximum key, collapsing is disabled.
beforeToggle: null Callback invoked before expanding/collapsing starts. Receives arguments: button (button), element (content element), isExpanded (boolean state).
afterToggle: null Callback invoked after expanding/collapsing completes. Receives the same arguments: button, element, isExpanded.
blockProcessed: null Callback invoked after the plugin processes an element. Receives arguments: element (content element), needsToggle (boolean indicating if a button is needed). <br><br>

Events

Readmore.js generates two events: readmore:beforeToggle and readmore:afterToggle. These can be used to add custom logic during state transitions.

readmore:beforeToggle Triggered before the element's state changes
readmore:afterToggle Triggered after the element's state changes. <br><br>

Callbacks

The beforeToggle and afterToggle callbacks receive the following arguments: trigger, element, and isExpanded.

trigger: The element that triggers the action (e.g., the «Read more

Related Skills

node-connect

345.4k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

104.6k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

345.4k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

345.4k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。