页面加载时指定区块未默认隐藏，如何调整实现初始隐藏的交互效果？

解决方案 #

你只需要给id="service-area2"的区块设置初始隐藏状态即可，有两种实现方式可选： #

方案1：直接修改HTML代码（推荐，最简单） #

直接给service-area2的DOM元素添加原生hidden属性，示例如下：

<!-- 你原来的service-area2容器，加上hidden属性即可 -->
<div id="service-area2" hidden>
  <!-- 底部6张图片的内容 -->
</div>

这个方案不需要修改你现有的JS逻辑，原有点击切换的代码可以直接正常运行，完全符合你的预期效果。 #

方案2：通过JS添加初始化逻辑 #

如果你不方便直接修改HTML结构，可以在现有JS代码基础上增加页面加载完成后的初始化逻辑：

function toggleBlock() {
  var myBlock = document.getElementById("service-area2");
  var blockButton = document.getElementById("ShowMore");
  if (myBlock.hidden) {
    blockButton.innerHTML = "Show Less";
    myBlock.hidden = false;
  } else {
    blockButton.innerHTML = "Show More";
    myBlock.hidden = true;
  }
}
// 新增初始化逻辑：页面DOM加载完成后隐藏目标区块
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("service-area2").hidden = true;
})

内容的提问来源于stack exchange，提问作者Gamicord