如何仅通过CSS实现点击“read more”按钮后隐藏该按钮并完成内容显示/隐藏切换

没问题！咱们可以利用CSS的兄弟选择器和复选框状态来实现这个需求，完全不需要JavaScript。核心就是调整一下HTML结构，再通过复选框的checked状态来控制「read more」按钮的显示与隐藏。

修改后的HTML代码 #

<input id="show" type="checkbox">
<label for="show" class="read-more">read more</label>
<div id="content">
  <p>i need help</p>
  <label for="show" style="color: red;">Hide</label>
</div>

修改后的CSS代码 #

#show, #content {
  display: none;
}

/* 复选框选中时，显示内容并隐藏read more按钮 */
#show:checked ~ #content {
  display: block;
}
#show:checked ~ .read-more {
  display: none;
}

原理说明 #

• 调整了HTML结构，把「read more」标签放在复选框的直接后面，这样就能用CSS的相邻兄弟选择器~关联它和复选框的状态
• 默认状态下，复选框和内容区域隐藏，「read more」按钮正常显示
• 点击「read more」时，复选框被选中，此时通过#show:checked ~ .read-more让按钮隐藏，同时#show:checked ~ #content让内容区域显示
• 点击内容里的「Hide」标签时，复选框取消选中，内容区域隐藏，「read more」按钮又会重新显示出来

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