Show More/Less

const readMores = document.querySelectorAll('.read-more');
readMores.forEach(r => {
const btnToggle = r.querySelector('[data-pf-type="Button"]');
btnToggle.dataset.areaChecked = 'true';
const contentToggle = r.querySelector('[data-pf-type="Paragraph"] > span');
const contentLength = contentToggle.parentElement.getAttribute("data-length");
const stateContent = contentToggle.textContent;
contentToggle.textContent = `${stateContent.substring(0, `${contentLength}`)}...`;

btnToggle.addEventListener('click', () => {
  if (btnToggle.dataset.areaChecked == 'true') {
    btnToggle.dataset.areaChecked = 'false';
    contentToggle.textContent = stateContent;
    btnToggle.textContent = 'Show Less';
    } else {
    btnToggle.dataset.areaChecked = 'true';
    contentToggle.textContent = `${stateContent.substring(0, `${contentLength}`)}...`;
    btnToggle.textContent = 'Show More';
    }
});
});