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.

					element.addEventListener('readmore:beforeToggle', function(event) {
						// Example: Change button style before toggling state
						event.target.style.backgroundColor = 'gray';
					});
				

readmore:afterToggle

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

					element.addEventListener('readmore:afterToggle', function(event) {
						// Example: Change button text after toggling state
						const button = event.target;
						button.textContent = button.textContent === 'Read more' ? 'Hide' : 'Read more';
					});
				

Callbacks

Readmore.js supports the use of callback functions, which can be passed in the configuration options. This allows performing specific actions at various stages of the plugin's operation.

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).

beforeToggle

The callback is triggered before the element's state changes. It allows actions to be taken before the state transition.

					beforeToggle: function(trigger, element, isExpanded) {
						// Example: Make the element semi-transparent before state change
						element.style.opacity = 0.5;
					}
				

afterToggle

The callback is triggered after the element's state changes. It allows restoring the element's state after the change.

					afterToggle: function(trigger, element, isExpanded) {
						// Example: Restore element opacity after state change
						element.style.opacity = 1;
					}
				

blockProcessed

Called after the element has been processed but before it is displayed. This is useful for performing initial setup or analysis.

The blockProcessed callback receives the following arguments: element and isExpandable

• element — the block that has just been processed.
• isExpandable — a boolean value indicating whether collapsing is needed.

					blockProcessed: function(element, isExpandable) {
						// Example: Show the «Read more» button if the element is expandable
						if (isExpandable) {
							const button = element.querySelector('.cs_readmore-btn');
							if (button) {
								button.style.display = 'block';
							}
						} else {
							// Hide the button if the element is not expandable
							const button = element.querySelector('.cs_readmore-btn');
							if (button) {
								button.style.display = 'none';
							}
						}
					}
				

Comprehensive Usage 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:

					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');
							}
						}
					});