js折叠显示一个div

在JavaScript中，你可以通过CSS和JavaScript配合，实现一个元素的折叠显示效果。最常见的方式是利用`<details>`和`<summary>`标签，这在HTML5中已经被支持，它们天然就适合这种功能。

HTML部分：

<button onclick="toggleDetails()">展开/折叠</button>
<details id="myDiv">
  <summary>点击查看详细内容...</summary>
  这是需要隐藏或显示的内容...
</details>

JavaScript部分：

function toggleDetails() {
  var div = document.getElementById('myDiv');
  if (div.open) {
    div.style.display = "none";
    div.open = false;
    this.textContent = '展开';
  } else {
    div.style.display = "block";
    div.open = true;
    this.textContent = '折叠';
  }
}

当用户点击“展开/折叠”按钮时，会触发`toggleDetails`函数，它检查`<details>`元素是否已展开（`.open`属性为true），如果是则折叠并改变文本；如果不是，则展开并改变文本。这就是一个基本的折叠显示功能实现。