css - 没有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 的情况下执行此操作？

我已经尝试了来自 this question 的主要答案, 但它不起作用，详情 here .

Answer 1

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

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