html - Jupyter 笔记本 : Hide/fold a paragraph of text as "hints"

Question

我正在使用 Jupyter Notebook 进行交互式编码演示。有一个练习块，用户应该在其中输入自己的代码来尝试解决问题。

我现在想选择性地给出一些进一步的说明，即提示如何解决问题，默认情况下应该隐藏。

我找到了 this answer ，它链接到这个 site here ，在一个原始的 nbconvert 单元中使用 JavaScript 来隐藏输出单元。但是，这似乎只适用于导出的笔记本，而我想要笔记本本身中的一些东西。
所以我尝试将类似的 JS 添加到 Markdown 单元格中，但这不起作用，因为 JS 被清理掉了。

我不确定 CSS 是否也得到净化，但原始 HTML 有效。有没有一种好方法来创建一个隐藏/折叠的文本段落，例如“单击此处获取进一步说明”以显示文本？

到目前为止我能想到的最好的是 title 属性来创建鼠标悬停文本，不幸的是没有进一步格式化:
<span title="Instruction text goes here">Mouse over for further instructions</span>

Answer 1

<details> 标签是纯粹的 HTML，它可以做到这一点，并且不会被 sanitizer 删除。它可以有一个 <summary> 来描述折叠的内容。

<details>
<summary>Click here for instructions</summary>
Instructions go here
</details>

另见: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details