'Jupyter Notebook: Hide / fold a paragraph of text as "hints"

I am using a Jupyter Notebook for an interactive coding demonstration. There is an exercises block where the user should enter their own code to try and solve a problem.

I now want to optionally give some further instructions, i.e. hints how to solve the problem, which should be hidden by default.

I found this answer, which links to this site here, using JavaScript in a raw nbconvert cell to hide output cells. However, this only seems to work for exported notebooks, while I want something in the notebook itself. So I've tried adding similar JS into a Markdown cell, but that doesn't work because the JS gets sanitized away.

I'm not sure if CSS also gets sanitized, but raw HTML works. Is there a good way to create a hidden/folded text paragraph with something like "click here for further instructions" to show the text?

The best I could come up with so far was a title attribute to create a mouse-over text, unfortunately without further formatting:

<span title="Instruction text goes here">Mouse over for further instructions</span>

htmljupyter-notebookjupyter


Solution 1:[1]

The <details> tag is pure HTML which does just that, and which does not get removed by the sanitizer. It can have a <summary> to describe the contents of the fold.

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

See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andre

Related Questions