Menu
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>
491
There are two ways to hide content: To hide Markdown, use the {toggle} directive. To hide or remove code cells or their outputs, use notebook cell tags.
IPython has a cell magic, %%capture , which captures the stdout/stderr of a cell. With this magic you can discard these streams or store them in a variable. from __future__ import print_function import sys. By default, %%capture discards these streams. This is a simple way to suppress unwanted output.
If you structure your Jupyter Notebook with headings, you can collapse the information and cells within that same heading section with the down arrow to the left of the heading.
Ctrl + ] indent. Ctrl + [ dedent. Ctrl + A select all.
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
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With