如何在展开后将可折叠的“more”更改为“less”？

<div id="content" class="collapsed">
  <!-- 展示的内容 -->
</div>

.collapsed {
  height: 100px; /* 初始高度，根据需求设置 */
  overflow: hidden;
}

.expanded {
  height: auto; /* 展开后的高度，根据内容自动调整 */
}

var content = document.getElementById("content");
var moreButton = document.getElementById("moreButton");

moreButton.addEventListener("click", function() {
  if (content.classList.contains("collapsed")) {
    content.classList.remove("collapsed");
    content.classList.add("expanded");
    moreButton.innerHTML = "less";
  } else {
    content.classList.remove("expanded");
    content.classList.add("collapsed");
    moreButton.innerHTML = "more";
  }
});