写一个讲网页内容折叠的代码

好的，下面是一个简单的示例代码，可以折叠/展开网页内容：

HTML部分：

<div class="foldable">
  <div class="foldable-title">
    <h2>这是标题</h2>
    <button class="foldable-btn">展开</button>
  </div>
  <div class="foldable-content">
    <!-- 这里是折叠的内容 -->
    <p>这里是折叠的内容，可以包含任意HTML标签。</p>
    <p>例如：<a href="#">超链接</a>、<img src="image.jpg" alt="图片" />等等。</p>
  </div>
</div>

CSS部分：

.foldable-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foldable-btn {
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.foldable-content {
  display: none;
}

JavaScript部分：

var foldableBtns = document.querySelectorAll('.foldable-btn');

for (var i = 0; i < foldableBtns.length; i++) {
  foldableBtns[i].addEventListener('click', function() {
    var foldableContent = this.parentNode.nextElementSibling;
    if (foldableContent.style.display === 'none') {
      foldableContent.style.display = 'block';
      this.textContent = '折叠';
    } else {
      foldableContent.style.display = 'none';
      this.textContent = '展开';
    }
  });
}

这个代码会在每个折叠区域的标题和“展开”按钮之间显示一个折叠/展开的状态。当用户点击按钮时，折叠区域的内容会显示/隐藏，并且按钮上的文字会改变为“折叠”或“展开”。