Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
469 views
in Technique[技术] by (71.8m points)

javascript - Show more/less on PHP value

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...