技术求助：实现点击More按钮显示隐藏Div并切换为Less按钮的功能

Hey there! 你的这个需求完全可行，这是前端里非常常见的交互场景，咱们就顺着你现有的思路一步步搞定它～

首先先理清楚核心逻辑：

• 初始状态：目标div隐藏，按钮显示「More」
• 点击按钮时：如果div处于隐藏状态，就显示它，同时按钮文本改成「Less」；如果div已经显示，就隐藏它，按钮文本改回「More」

下面是具体的代码实现：

1. HTML 结构 #

先把基础DOM结构搭好，给元素加上方便获取的标识：

<!-- 切换按钮 -->
<button id="toggleBtn">More</button>

<!-- 需要隐藏/显示的目标区块 -->
<div id="hiddenPortfolioContent" class="hidden">
  这里是你要展示的作品集详细内容啦～
</div>

2. CSS 样式 #

用类来控制区块的初始隐藏状态，这种方式比直接写内联样式更灵活：

.hidden {
  display: none;
}

3. JavaScript 交互逻辑 #

监听按钮的点击事件，完成状态切换：

// 获取按钮和目标区块元素
const toggleBtn = document.getElementById('toggleBtn');
const hiddenContent = document.getElementById('hiddenPortfolioContent');

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
  // 一键切换区块的隐藏/显示状态
  hiddenContent.classList.toggle('hidden');
  
  // 根据当前区块状态更新按钮文本
  if (hiddenContent.classList.contains('hidden')) {
    toggleBtn.textContent = 'More';
  } else {
    toggleBtn.textContent = 'Less';
  }
});

额外小提示： #

• 用classList.toggle()方法可以快速切换类的存在状态，比手动修改style.display更优雅，后续如果想加过渡动画之类的样式扩展，直接修改CSS就行，不用动JS逻辑
• 如果你更习惯直接操作行内样式，也可以改成下面这种写法：

toggleBtn.addEventListener('click', function() {
  if (hiddenContent.style.display === 'none' || hiddenContent.style.display === '') {
    hiddenContent.style.display = 'block';
    toggleBtn.textContent = 'Less';
  } else {
    hiddenContent.style.display = 'none';
    toggleBtn.textContent = 'More';
  }
});

不过还是更推荐用类控制的方式，毕竟样式和逻辑分离，维护起来更省心～

这样就完全符合你一开始的实现思路啦，功能可以正常跑起来，放心用就行！

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