没有javascript的折叠

Question

我知道如何折叠（显示/隐藏）一个 div：

 $('#nav').click(function() { $('#hello').toggleClass('hidden'); });

 .hidden { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>

没有 Javascript / jQuery 是否可以做到这一点？

我已经尝试了 这个问题 的主要答案，但它不起作用，详见 此处。

原文由 Basj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 :checked 选择器。

 #hidden {
  display: none;
  height: 100px;
  background: red;
}
:checked + #hidden {
  display: block;
}

 <input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>

<label for="my_checkbox">Show/hide</label>

示例小提琴

原文由 Denis Sheremet 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

没有人提到“细节”元素，这似乎非常适合这项工作。

 <details>
    <summary>Click to toggle</summary>
    <span>Oh, hello</span>
</details>

原文由 Matthew Spencer 发布，翻译遵循 CC BY-SA 4.0 许可协议