js点击查看更多内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查看更多内容示例</title>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<div id="content">
  <p>这是初始显示的内容。</p>
  <div class="hidden" id="moreContent">
    <p>这是点击查看更多后会显示的内容。</p>
  </div>
</div>

<button onclick="showMore()">查看更多</button>

<script>
function showMore() {
  var moreContent = document.getElementById('moreContent');
  if (moreContent.classList.contains('hidden')) {
    moreContent.classList.remove('hidden');
    this.textContent = '收起';
  } else {
    moreContent.classList.add('hidden');
    this.textContent = '查看更多';
  }
}
</script>

</body>
</html>