如何停止扩展/灵活的文本小部件呈现部分隐藏的文本

<div class="widget">
  <div class="content">
    <p>这是要显示的文本内容。</p>
    <p>这是要隐藏的文本内容。</p>
  </div>
  <button id="toggleButton">展开/收缩</button>
</div>

.widget {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

.content {
  height: 100px;
  overflow: hidden;
}

button {
  margin-top: 10px;
}

var toggleButton = document.getElementById("toggleButton");
var content = document.querySelector(".content");

toggleButton.addEventListener("click", function() {
  if (content.style.height === "100px") {
    content.style.height = "auto";
    toggleButton.textContent = "收缩";
  } else {
    content.style.height = "100px";
    toggleButton.textContent = "展开";
  }
});