Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/corgras/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.
https://github.com/corgras/readmore.js

javascript js plugin plugins read-more read-more-button readmore responsive

Last synced: 3 months ago
JSON representation

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.

Awesome Lists containing this project

README 

        




CORGRAS



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









GitHub Release

Language Javascript

GitHub License






A smooth and responsive plugin in pure JavaScript for collapsing and expanding long text blocks. The «Read More» or «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:**





Documentation






## Install NPM



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:



```html



```





## Install CDN



You can also include this library from CDN:

```html



```





Alternative CDNs:

```html



```





## Install Manually



Download a zip of the latest release. 



Download



Import the `readmore.min.js` file by the `` tag:



```html

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

```





## Usage



**Initialization without additional parameters:**



```javascript

document.addEventListener('DOMContentLoaded', function () {

    initReadMore('.readmore');

});

```





**Initialization with additional options for all screen sizes:**



```javascript

document.addEventListener('DOMContentLoaded', function () {

	initReadMore('.readmore', {

		collapsedHeight: 200,

		speed: 100,

		heightMargin: 16,

		moreLink: 'Read More',

		lessLink: 'Close'

	});

});

```





**Initialization for different screen sizes:**



```javascript

document.addEventListener('DOMContentLoaded', function () {

	initReadMore('.readmore', {

		collapsedSize: 200,

		speed: 200,

		heightMargin: 16,

		moreLink: 'Read More',

		lessLink: 'Close',

		breakpoints: {

			576: {

				collapsedSize: 100,

				speed: 200,

				moreLink: 'More',

				lessLink: 'Collapse',

			},

			768: {

				collapsedSize: 150,

				speed: 250,

			},

		}

	});

});

```





## Options



* `speed: 100` Defines the speed of the height change animation (in milliseconds).

* `collapsedHeight: 200` Sets the initial content height in collapsed state (in pixels).

* `heightMargin: 16` Additional height margin to ensure space when expanding the content (in pixels).

* `moreLink: 'Read more'` The «Read More» button text with HTML support. Used inside the  element, which is displayed to expand hidden content.

* `lessLink: 'Close'` The «Close» button text with HTML support. Used inside the  element, which is displayed to collapse content after it has been expanded.

* `lazyLoad: true/false` When enabled, elements (content or media) will only be initialized when they appear in the viewport.

* `hideButtonCollapse: true/false` If set to true, the «Read More» button is not displayed when the entire content fits in the visible area without needing to be collapsed.

* `animationMode: 'js'` Animation mode for height change: js — use JavaScript animation; css — CSS animation is used. When this mode is activated, the class cs_readmore-animation is added to the element.

* `breakpoints: {}` Allows specifying different values for other options depending on the screen width. Keys are screen widths (in pixels), and values are objects with new option values.






## Events



Readmore.js generates two primary events: `readmore:beforeToggle` and `readmore:afterToggle`. These events can be listened to and used to add custom logic during the element's state transition.



* `readmore:beforeToggle` This event is triggered before the element's state changes. It allows configuring behavior before the state is modified.



* `readmore:afterToggle` This event is triggered after the element's state changes. It allows actions to be performed immediately after the state is updated.






### 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» or «Close» button).

* `element`: The element containing the content to be expanded or collapsed.

* `isExpanded`: A value indicating the content's state: (true — expanded, false — collapsed).





The `blockProcessed` callback receives `element` and `isExpandable`.



* `element`: the block that has just been processed

* `isExpandable`: a boolean value indicating whether collapsing is needed






#### Callback Example:



This example demonstrates the use of callback functions to modify the button's appearance and text depending on the element's state. It shows how the button style can be changed before and after state toggling:



```javascript

initReadMore('.content', {

	beforeToggle: function(trigger, element, isExpanded) {

		// Example: Change the button background color before state change

		trigger.style.backgroundColor = isExpanded ? '#90EE90' : '#FF7F7F';

	},

	afterToggle: function(trigger, element, isExpanded) {

		// Example: Update the button text after state change

		trigger.textContent = isExpanded ? 'Hide' : 'Read more';

	},

	blockProcessed: function(element, isExpandable) {

		// Example: Add a class if the element is expandable

		if (isExpandable) {

			element.classList.add('expandable');

		}

	}

});

```






## CSS:



You can familiarize yourself with the CSS classes and data attributes used in the Readmore.js plugin, as well as their descriptions. These classes and attributes will help you style elements and control their behavior when expanding and collapsing content.



* `.cs_readmore-btn-wrapper` Applied to the container of the button that manages the «Read More» or «Close» actions. Serves as a wrapper for the button.

* `.cs_readmore-btn` Assigned to the button that allows the user to expand or collapse the content. Manages the styles of the button itself.

* `.cs_readmore-animation` Used if the CSS animation mode `animationMode: 'css'` is enabled. Added to create animations through CSS.



* `data-readmore-btn-toggle'` Applied to the «Read More» or «Close» button. Used to track the button's state. The attribute stores the button state: `collapsed` — the button is in the collapsed state; `expanded` — the button is in the expanded state.

* `data-readmore-block-toggle` Applied to the element containing the content. Helps track the current state of the content (collapsed or expanded). The attribute manages the content block's state: `collapsed` — the block is collapsed. `expanded` — the block is expanded.





**Example of Styling**



The code creates styles for the button container and the button itself, adding padding, text alignment, and user interaction styles, including color changes on hover.



```css

.cs_readmore-btn-wrapper {

	margin: 15px auto 0;

	text-align: center;

}

.cs_readmore-btn-wrapper:before {

	border-top: 1px solid #ddd;

	content: '';

	display: block;

	width: 100%;

	z-index: -1;

	position: relative;

	transform: translateY(15px);

}

.cs_readmore-btn {

	color: #005EFF;

	background: #fff;

	border: 0;

	margin: 0;

	padding: 0 20px;

	text-align: center;

}

.cs_readmore-btn:hover {

	color: #0051DE;

}

```






## Browser Support



 - **Google Chrome:** 💻 51+ | 📱 51+



 - **Microsoft Edge:** 💻 Edge 15+ | 📱 Edge 92+



 - **Mozilla Firefox:** 💻 55+ | 📱 55+



 - **Safari:** 💻 12.1+ | 📱 14+



 - **Opera:** 💻 38+ | 📱 41+






## 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 :)





Donate