单独的 Show-Hide 触发器与 Hide 触发器结尾：仅 CSS答案

【问题标题】：Separate Show-Hide triggers with Hide trigger at end: CSS only单独的 Show-Hide 触发器与 Hide 触发器结尾：仅 CSS
【发布时间】：2018-12-23 15:18:55
【问题描述】：

我的主页上有两篇长篇介绍性文章。它们仅对第一次访问者是必需的，所以我想简单地显示一个带有扩展选项的摘要。

我的问题是由于文章很长，“隐藏”选项需要在文章的末尾。这使得收音机/输入选项受到限制，除非我能找到一种从最后激活它的方法。有没有办法只使用 css 来触发它？

该网站仅使用 CSS。我不关心过时的浏览器，但我希望它对 SEO 友好（可读）并且没有任何安全触发器（因此没有脚本）。

我已经阅读了我能找到的所有内容，但是这些选项要么需要相同的触发器来激活显示/隐藏（在我的情况下对用户不友好，因为用户必须在文章中搜索它）或 JS。我试过玩链接和按钮无济于事。我考虑过使用对话框，但这也需要 JS 激活。模态弹出窗口是一种可能性，但我不确定它对弹出窗口阻止程序有何反应，所以我将它作为最后的手段。

其他回复有些过时了，所以我希望有一些现在可以考虑得到更广泛支持的技术。

这里是jsfiddle。

/*OPTION 1*/
#More,#Art1 {display: none} /*hides checkbox and 2nd part of article */

#More:checked~#Art1 {
	display: block;
}

/*Trying to get it to close: */

#Less {
  display: none}
#Less:checked~#Art2 {
	display: none;
}  

/* OPTION 2 */
.option2 {
  background-color: yellow;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.text2b {
  background: #bbb;
  border-radius: 5px;
  width: 70%;
  position: relative;
  transition: all 5s ease-in-out;
}

.text2b .close {

  transition: all 200ms;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

<!--OPTION 1 -->
<p>OPTION 1. RADIO BUTTONS. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
</p><input type=checkbox id="More"><label for="More">MORE</label>

<div id="Art1">
  <p>
  Second part of Lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The End of Option 1.</p>
<input type=checkbox id="Less"><label for="Less">LESS</label>
  
</div>

<!--OPTION 2 -->

<div id="option2a" class="option2">
  
  <p>OPTION 2. MODAL OPTION. The beginning of an article. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.2B continued.
  </p><a href="#option2b">MORE</a>

<div id="option2b" class="overlay">
  <div class='text2b'>
  <p>
  Second part of of MODAL OPTION. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. The end. </p>
  
  <a class="close" href="#">CLOSE</a>
 
 </div>
 </div>
<p>
 Other stuff... Meant only to check positioning of Modal.
</p>

小提琴显示了这个选项和我一直在玩的模态版本。欢迎其他符合先决条件的想法。

【问题讨论】：

看看这个stackoverflow.com/questions/17731457/…
是的。看见了。好主意，但都有相同的显示/隐藏触发器。我需要在底部“隐藏”。
通过告诉我隐藏在底部意味着什么？
隐藏选项应该在文章末尾。用户不应搜索它。如果上面的代码可以工作，那就完美了。但单选按钮仅显示/隐藏其下方的内容，而不是其上方。
使用 CSS 你可以将它定位到底部..对吗？

标签： css triggers modal-dialog radio-button show-hide

【解决方案1】：

我刚刚放弃了这种技术，但令人惊讶的是，有一个解决方案。显然，您可以将多个标签绑定到一个表单控件。所以通过在文章末尾简单地为“MORE”添加一个标签（不是输入字段），它实际上触发了原始输入。不需要额外的 CSS。

在 FF 中就像一个魅力，虽然我不明白为什么在其他浏览器中会出现问题，但我没有机会验证。

CSS-Tricks 的 Beverleyh 将这个极其简单的解决方案完全归功于：
CSS-Tricks Forum

我希望这对其他人有所帮助。我并不真正了解此功能，但可以看到它的许多用途。

【讨论】：