Events

The ReadMore.js plugin generates two custom events: readmore:beforeToggle and readmore:afterToggle. These events allow developers to track changes in an element's state (expanding or collapsing) and add custom logic to enhance behavior.

readmore:beforeToggle

This event is triggered before an element's state changes (expanding or collapsing). It is useful for preparatory actions, such as modifying styles or initiating animations before the toggle.

					element.addEventListener('readmore:beforeToggle', function(event) {
						// Example: Change the element's background color before toggling
						event.target.style.backgroundColor = '#f0f0f0';
					});
				

readmore:afterToggle

This event is triggered after an element's state change is complete. It allows actions related to the new state, such as updating button text or styles.

					element.addEventListener('readmore:afterToggle', function(event) {
						// Example: Log a message to the console after toggling
						console.log('Element state changed. New state:', event.target.getAttribute('aria-expanded'));
					});
				

Callbacks

ReadMore.js supports three callbacks that can be passed in the configuration object: beforeToggle, afterToggle, and blockProcessed. These allow custom code execution at different stages of the plugin's operation, providing flexibility in behavior customization.

beforeToggle

Called before an element's state is toggled (expanding or collapsing). This callback is useful for preparing elements or modifying their appearance before the animation.

Arguments:

• trigger — The button that initiates the toggle (e.g., «Read More» or «Hide»).
• element — The content element being expanded or collapsed.
• isExpanded — A boolean value: true if the element will be expanded, false if collapsed.

					beforeToggle: function(trigger, element, isExpanded) {
						// Example: Add a fade animation before toggling
						element.style.transition = 'opacity 0.2s';
						element.style.opacity = 0.7;
					}
				

afterToggle

Called after an element's state toggle is complete. It allows actions related to the new state, such as updating styles or triggering additional effects.

Arguments: Same as beforeToggle (trigger, element, isExpanded).

					afterToggle: function(trigger, element, isExpanded) {
						// Example: Restore opacity after toggling
						element.style.opacity = 1;
						console.log('Content', isExpanded ? 'expanded' : 'collapsed');
					}
				

blockProcessed

Called after processing each element by the plugin, regardless of whether collapsing is applied. This callback is useful for initial element setup or state analysis.

Arguments:

• element — The element that was processed.
• isExpandable — A boolean value: true if the content exceeds collapsedHeight and requires a button, false if collapsing is not needed.

					blockProcessed: function(element, isExpandable) {
						// Example: Add a class for styling if the element is expandable
						if (isExpandable) {
							element.classList.add('has-readmore');
						} else {
							element.classList.remove('has-readmore');
						}
					}
				

Comprehensive Usage Example

This example demonstrates how to combine events and callbacks to create an interactive experience. We modify button styles, update text based on state, and add a custom class for expandable elements.

					initReadMore('.content', {
						collapsedHeight: 200,
						speed: 400,
						moreLink: '<span>Read More</span>',
						lessLink: '<span>Hide</span>',
						beforeToggle: function(trigger, element, isExpanded) {
							// Change button color before toggling
							trigger.style.backgroundColor = isExpanded ? '#d4edda' : '#f8d7da';
						},
						afterToggle: function(trigger, element, isExpanded) {
							// Update button text and log state
							trigger.textContent = isExpanded ? 'Collapse' : 'Read More';
							console.log('State changed:', isExpanded ? 'expanded' : 'collapsed');
						},
						blockProcessed: function(element, isExpandable) {
							// Add or remove class based on expandability
							element.classList.toggle('expandable-content', isExpandable);
						}
					});

					// Add event listener for additional logic
					document.querySelectorAll('.content').forEach(element => {
						element.addEventListener('readmore:afterToggle', function(event) {
							// Example: Add animation after expanding
							if (event.target.getAttribute('aria-expanded') === 'true') {
								event.target.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
							} else {
								event.target.style.boxShadow = 'none';
							}
						});
					});