javascript - Show more/less on PHP value

Question

The code:

<p><?= $row['courseInfo']; ?></p> 

How to make a show more/less button with a limited number of characters. But when touched show more shows all the text there is, when show less it goes back to the limited number of characters.

Answer 1

Here's a JS method. I will work on controlling the character count but for now....

window.onload = function() {
  let rm = document.querySelectorAll('.readmore');
  rm.forEach(el => {
    el.classList.add('less');
    var div = document.createElement('div');
    div.innerHTML = "<a href='javascript:void(0);' class='rmlink' onclick='toggleRM(this)'>Read more</a>";
    el.append(div);

  })
}

function toggleRM(el) {
  const cl = el.parentNode.parentNode.classList
  const is_less = cl.contains('less');
  el.innerHTML = !is_less ? "Read More" : "Read Less";
  if (is_less) cl.remove('less');
  else cl.add('less');
}

.readmore {
  max-width: 250px;
  border: 1px solid #333;
  padding: 10px;
}

.readmore.less {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class='readmore'>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
  animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
  est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
  voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>