Smooth Responsive Read More JavaScript Plugin – Readmore.js

Preview:

Description:

A smooth and responsive ‘Read More’ JavaScript plugin that truncates long text content and reveals the full content with the click of a “Read More” link.

You can use the plugin to create better reader experiences on long posts or articles. It declutters the initial view while still making the entire text reachable. The adaptive sizing also optimizes content display for mobile vs desktop.

How to use it:

1. Download and load the main script readmore.min.js in the document.

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

2. Initialize the plugin on the target text block as follows:

<article class="demo">
  Long Content Here
</article>

initReadMore('.demo', {
  // options here
});

3. The collapsed state can be customized by setting a maximum height. Default: 250(px).

initReadMore('.demo', {
  collapsedHeight: 200,
});

4. Specify the animation speed. Default: 200(ms).

initReadMore('.demo', {
  speed: 200,
});

5. Customize the Read More & Read Less links.

initReadMore('.demo', {
  moreLink: '<a href="#">Read more</a>'
  lessLink: '<a href="#">Close</a>'
});

6. Set the maximum screen width in pixels at which the plugin will be activated.

initReadMore('.demo', {
  maxWidth: '640'
});

7. Callback functions.

initReadMore('.demo', {
  beforeToggle: function(trigger, element, isExpanded){},
  afterToggle: function(trigger, element, isExpanded){},
  blockProcessed: function(element, isExpandable){}
});

8. Define configs for different screen sizes.

initReadMore('.demo', {
  breakpoints: {
    576: {
      // options here
    },
    768: {
      disableCollapse: true,
      // options here
    },
  }
});

9. Delay the loading of content until it enters the viewport. Default: false.

initReadMore('.demo', {
  lazyLoad: true.
});

10. Set the animation mode. Default: ‘js’.

initReadMore('.demo', {
  animationMode: 'css',
});

11. Determine whether to hide the collapse button. Default: false.

initReadMore('.demo', {
  hideButtonCollapse: true,
});

Changelog:

v2.2.0 (04/17/2025)

• New Option: disableCollapse: Added a new configuration option to disable the “Read More” functionality entirely when set to true. This allows for greater control over when the plugin should be applied.
• Improved Breakpoint Handling: Enhanced the logic for responsive breakpoints in getOptionsForWidth.
• Optimized Initialization: Added checks to skip processing elements when the plugin is disabled via disableCollapse or when no valid options are available for the current screen width.
• Accessibility Update: Changed the role attribute from region to area in initializeStyles (note: this may require further review for ARIA compliance).
• Enhanced Element Cleanup: Improved cleanup logic to ensure styles and attributes are properly removed when the plugin is disabled.
• Filtered out invalid breakpoint keys to prevent errors in getOptionsForWidth.

v2.1.0 (03/30/2025)

• Support for ARIA attributes to enhance accessibility (aria-expanded, aria-hidden, aria-controls, role).
• Automatic block height on expansion using element cloning.
• Modular structure with IIFE and export (CommonJS, ES Modules).
• Compatibility with Webpack, Rollup, Vite, and other bundlers.
• Error handling with console output.
• Improved button functionality and styling.
• Optimized dynamic element height (replacing fixed height).
• Reworked HTML sanitization with error handling.
• Updated element processing logic.
• Revised animation approach.

v2.0.0 (01/26/2025)

• New options format
• Media query support
• Lazy Loading
• Enhanced events and callback functions
• CSS and JS animation support
• Simplified styling
• Support for hiding the “Collapse” button
• Multimedia compatibility

v1.1.0 (12/02/2024)

• Content Height Limitation: You can now limit the height of content on your web page. Content that exceeds the specified height will be automatically truncated and hidden.
• Content Expansion and Collapse: Users can easily expand the full content by clicking the “Read More” button and collapse it by clicking the “Close” button.
• Responsive to Media Queries: The feature automatically responds to changes in the browser window width. If the window becomes too narrow to accommodate the limited content, the feature disables height limitation.
• Customizable Parameters: You can customize animation speed, the height of the element in the collapsed state, margin height when content is expanded, and the text for the “Read More” and “Close” buttons.

v1.0.0 (10/31/2024)

• Content Height Limitation: You can now limit the height of content on your web page. Content that exceeds the specified height will be automatically truncated and hidden.
• Content Expansion and Collapse: Users can easily expand the full content by clicking the “Read More” button and collapse it by clicking the “Close” button.
• Responsive to Media Queries: The feature automatically responds to changes in the browser window width. If the window becomes too narrow to accommodate the limited content, the feature disables height limitation.
• Customizable Parameters: You can customize animation speed, the height of the element in the collapsed state, margin height when content is expanded, and the text for the “Read More” and “Close” buttons.