Options

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

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

Below is a detailed description of all available parameters:

Option

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', the speed is halved.

moreLink

String

HTML string for the «Read More», button displayed in the collapsed state. Inserted into a <button> element. HTML is sanitized to remove potentially dangerous attributes for security.

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 to remove unsafe code.

hideButtonCollapse

Boolean

false

If true, the button is hidden after expanding the content, reducing 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 transitions.
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'. 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 the viewing experience.

breakpoints

Object

{}

Allows setting different parameter values based on screen width. Keys are the maximum screen width in pixels; values are objects 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 starting, 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 with the initReadMore function, passing a selector and a parameters object. This allows you to tailor the behavior to your website.

Below is an example initialization with various parameters:


					document.addEventListener('DOMContentLoaded', function () {
						initReadMore('.readmore', {
							collapsedHeight: 200,
							speed: 400,
							moreLink: '<span>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 the parameters to achieve the desired functionality, creating a user-friendly and interactive interface for your users.