如何从下往上“折叠”div？

<div id="myDiv">
  <!-- 添加需要显示的内容 -->
</div>

#myDiv {
  height: auto; /* 设置高度自适应 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: height 0.5s ease; /* 添加过渡效果 */
}

var myDiv = document.getElementById("myDiv");

function toggleDiv() {
  if (myDiv.style.height === "0px") {
    myDiv.style.height = "auto"; // 折叠状态下改为自适应高度
  } else {
    myDiv.style.height = "0px"; // 展开状态下改为0高度
  }
}

<button onclick="toggleDiv()">折叠/展开</button>