JS Ellipsis - Read More

When a paragraph is too long, use ellipsis to state there is more to read using (...)

by Thomas Orthbandt

HTML

<h2>Ellipsis</h2>
<p class="text">I consent to receive calls and/or text messages* by a university representative with information
   for educational<span class="dots"> ...</span> 
  <span class="moreText">I understand calls may be initiated by an automated telephone dialing system. I need not grant this consent to receive information or to be eligible to enroll with WCU. I also understand that if I no longer wish to receive text messages from WCU, I can text back "Stop" at any time to unsubscribe from the service. *Standard rates may apply.</span>
</p>
<a class="read-more">Read More</a>

CSS

body {
  font-family: 'Montserrat', sans-serif;
  max-width: 90%;
  margin: 0 auto;
  color: #000;
  font-size: 1rem;
}
.moreText {
  display: none;
}
.read-more {
  font-size: 1rem;
  text-decoration: underline;
}
.text.show-more .moreText {
  display: inline;
}
.text.show-more .dots {
  display: none;
}

JavaScript

const readMore = document.querySelector(".read-more");
const text = document.querySelector(".text");

readMore.addEventListener("click", (e) => {
  text.classList.toggle("show-more");
  if (readMore.innerText === "Read More") {
    readMore.innerText = "Read Less";
  } else {
    readMore.innerText = "Read More";
  }
});