/** * ReadMore * * Adds "read more" functionality to elements. * * Specifically, it looks for a trigger, by default ".js-read-more-trigger", and adds the class * "is-expanded" to the previous element in order to provide a click to expand functionality. * * This is useful for long text elements that you would like to truncate, especially for mobile. * * Example Markup *
*

Some text that should be long enough to have to truncate within a specified container.

*

This text will not appear in the container, as only the first line can be truncated.

*

This should also not appear, if everything is working correctly!

*
* * */ export default function initReadMore(triggerSelector = '.js-read-more-trigger') { const triggerEls = document.querySelectorAll(triggerSelector); if (!triggerEls) return; triggerEls.forEach((triggerEl) => { const targetEl = triggerEl.previousElementSibling; if (!targetEl) { return; } triggerEl.addEventListener( 'click', () => { targetEl.classList.add('is-expanded'); triggerEl.remove(); }, { once: true }, ); }); }