在角度中显示更多和显示更少

<div id="content">
  <p>这是一段默认显示的内容。</p>
  <p class="hidden">这是一段需要点击"显示更多"才能显示的内容。</p>
  <p class="hidden">这是另一段需要点击"显示更多"才能显示的内容。</p>
  <p class="hidden">这是还有一段需要点击"显示更多"才能显示的内容。</p>
</div>
<a id="show-more" href="#">显示更多</a>
<a id="show-less" href="#" class="hidden">显示更少</a>

.hidden {
  display: none;
}

var showMoreLink = document.getElementById("show-more");
var showLessLink = document.getElementById("show-less");
var hiddenContent = document.getElementsByClassName("hidden");

showMoreLink.addEventListener("click", function(e) {
  e.preventDefault();
  for (var i = 0; i < hiddenContent.length; i++) {
    hiddenContent[i].classList.remove("hidden");
  }
  showMoreLink.classList.add("hidden");
  showLessLink.classList.remove("hidden");
});

showLessLink.addEventListener("click", function(e) {
  e.preventDefault();
  for (var i = 0; i < hiddenContent.length; i++) {
    hiddenContent[i].classList.add("hidden");
  }
  showMoreLink.classList.remove("hidden");
  showLessLink.classList.add("hidden");
});