Así que obtuve esta clase para truncar el texto pero está arreglado, quiero hacerlo más dinámico. Quiero pasar la longitud del texto que quiero truncar y hacer que funcione con varios elementos. Soy un novato en las clases de JS, por lo que es un poco confuso para mí en este momento. gracias de antemano.
class readMore { constructor() { const end = 300; this.content = '.readmore__content'; this.buttonToggle = '.readmore__toggle'; } initiate() { this.setNodes(); this.init(); this.addEventListeners(); } setNodes() { this.nodes = { contentToggle: document.querySelector(this.content), }; this.buttonToggle = this.nodes.contentToggle.parentElement.querySelector(this.buttonToggle); } init() { const { contentToggle } = this.nodes; this.stateContent = contentToggle.innerHTML; contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`; } addEventListeners() { this.buttonToggle.addEventListener('click', this.onClick.bind(this)); } onClick(event) { const targetEvent = event.currentTarget; const { contentToggle } = this.nodes; if (targetEvent.getAttribute('aria-checked') === 'true') { targetEvent.setAttribute('aria-checked', 'false'); contentToggle.innerHTML = this.stateContent; this.buttonToggle.innerHTML = 'Show less'; } else { targetEvent.setAttribute('aria-checked', 'true'); contentToggle.innerHTML = `${this.stateContent.substring(200, `${end}`)}...`; this.buttonToggle.innerHTML = 'Show more'; } } } const initReadMore = new readMore(); initReadMore.initiate();