Events

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

readmore:beforeToggle

This event triggers before the element's state changes (expanding or collapsing). It is useful for preparatory actions, such as modifying styles or initiating animations prior to 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 triggers after the element's state change is complete. It allows for 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 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 toggling the element's state (expanding or collapsing). This callback is useful for preparing elements or altering their appearance before the animation.

Arguments:

• trigger — the button initiating the toggle (e.g., «Read more» or «Hide»).
• element — the element containing the content being expanded or collapsed.
• isExpanded — a boolean: 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 the element's state toggle is complete. It enables actions tied 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 processed element.
• isExpandable — a boolean: true if the content exceeds collapsedHeight and requires a button, false if collapsing is unnecessary.

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

Example of Comprehensive Usage

This example demonstrates combining 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 the button color before toggling
							trigger.style.backgroundColor = isExpanded ? '#d4edda' : '#f8d7da';
						},
						afterToggle: function(trigger, element, isExpanded) {
							// Update button text and add logging
							trigger.textContent = isExpanded ? 'Hide' : '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';
							}
						});
					});