Jupyter Notebook：隐藏/折叠一段文本作为“提示”

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