什么情况下需要隐藏页面的部分内容？
当你为了做网站优化而在这个页面加入了大量的内容（包含文字，图片，视频，表格等）如果这些内容全部展示可能会影响用户体验，同时也会减缓网页加载速度，这个时候可以把不需要出现的内容暂时先隐藏掉，等用户点击的时候再出现，如下图
这个页面的文案内容就是太多了，所以页面的编辑就把部分内容给隐藏了，当用户点击“show more”的时候再展示出来，你如果做过网站优化的话，可能会碰到类似的问题。
怎样通过代码来实现这个功能呢？
把下面的代码直接粘贴再html编辑器的顶部
<style><!--
.collapse-content {
display: none; /* Hide content by default */
margin-top: 10px;
}
.toggle-button {
cursor: pointer;
color: blue;
text-decoration: underline;
margin-top: 10px;
}
--></style>
把下面的代码放在html编辑器的最底部
<script>
function toggleContent(contentId, buttonId) {
var content = document.getElementById(contentId);
var button = document.getElementById(buttonId);
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block"; // Show content
button.innerText = "Show Less"; // Change button text to Show Less
} else {
content.style.display = "none"; // Hide content
button.innerText = "Show More"; // Change button text to Show More
}
}
</script>
在需要显示“Show More”的位置插入如下代码：
<div id="toggleButton" class="toggle-button" onclick="toggleContent('features', 'toggleButton')">Show More</div>
<div id="features" class="collapse-content">
在页面的源代码中加上上面的三段代码，就可以实现通过按钮“Show More””Show Less”来打开和隐藏页面的部分内容了。
这个小功能很用的，与外贸的小伙伴们共享！
