Changing Options

The initReadMore function allows configuring the behavior of the «Read More» plugin through a parameters object. This enables adapting content display, animation, and interaction to your site's needs.

With flexible settings, you can create a user-friendly and aesthetically appealing interface that aligns with your project's design and functional requirements.

Below is a detailed description of all available parameters:

Options

Type

Default

Description

collapsedHeight

Number

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

Number

300

Sets the duration of the expand/collapse animation in milliseconds. For collapsing in animationMode: 'js' mode, the speed is halved.

moreLink

String

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

String

<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

Boolean

false

If true, the button is hidden after expanding the content, avoiding unnecessary interface elements.

disableCollapse

Boolean

false

If true, disables the collapse function for an element or screen width range, displaying the full content.

animationMode

String

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

String

ease-in-out

Sets the transition type for animation in animationMode: 'js' mode. Available values: linear, ease, ease-in, ease-out, ease-in-out.

scrollToTopOnCollapse

Boolean

true

If true, the page smoothly scrolls to the top of the content after collapsing, improving viewing convenience.

breakpoints

Object

{}

Allows setting different parameter values based on screen width. Keys are the maximum screen width in pixels, values are an object with parameters.

Example:


								breakpoints: {
									768: {
										collapsedHeight: 150,
										moreLink: '<span>Read More</span>'
									},
									1200: { collapsedHeight: 200 }
								}

If the screen width exceeds the maximum key, collapsing is disabled.

beforeToggle

Function

null

Callback invoked before expanding/collapsing starts. Receives arguments: button (button), element (content element), isExpanded (boolean state).

Example:


								beforeToggle: (button, element, isExpanded) => {
									console.log('Toggle will start, state:', isExpanded);
								}

afterToggle

Function

null

Callback invoked after expanding/collapsing completes. Receives the same arguments: button, element, isExpanded.

Example:


								afterToggle: (button, element, isExpanded) => {
									console.log('Toggle completed, state:', isExpanded);
								}

blockProcessed

Function

null

Callback invoked after the plugin processes an element. Receives arguments: element (content element), needsToggle (boolean indicating if a button is needed).

Example:


								blockProcessed: (element, needsToggle) => {
									console.log('Element processed, button needed:', needsToggle);
								}

Example Configuration

To use the plugin, initialize it via the initReadMore function, passing a selector and a parameters object. This allows tailoring its behavior to your site.

Below is an example initialization with various parameters:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>Read More</span>',
							lessLink: '<span>Collapse</span>',
							animationMode: 'js',
							animationType: 'ease-in-out',
							scrollToTopOnCollapse: true,
							hideButtonCollapse: true,
							disableCollapse: false,
							breakpoints: {
								576: {
									collapsedHeight: 100,
									speed: 200,
									moreLink: '<span>Show</span>',
									lessLink: '<span>Hide</span>'
								},
								768: {
									collapsedHeight: 150,
									speed: 300
								},
								1024: {
									disableCollapse: true
								}
							},
							beforeToggle: (button, element, isExpanded) => {
								console.log('Toggle starting:', isExpanded);
							},
							afterToggle: (button, element, isExpanded) => {
								console.log('Toggle completed:', isExpanded);
							},
							blockProcessed: (element, needsToggle) => {
								console.log('Element processing completed, button:', needsToggle);
							}
						});
					});

This code applies the plugin to all elements with the .readmore class, configuring height, animation, button text, and responsive behavior.

You can adjust parameters to achieve the desired functionality, creating a user-friendly and interactive interface for users.