Jupyter Notebook: скрыть / сложить абзац текста как «подсказки»

Question

Я использую ноутбук Jupyter для интерактивной демонстрации кодирования.Есть блок упражнений, в котором пользователь должен ввести свой собственный код, чтобы попытаться решить проблему.

Теперь я хочу дополнительно дать некоторые дополнительные инструкции, то есть подсказки, как решить проблему, которая должна быть скрыта по умолчанию..

Я нашел этот ответ , который ссылается на этот сайт здесь , используя JavaScript в необработанной ячейке nbconvert, чтобы скрыть выходные ячейки.Однако, похоже, это работает только для экспортируемых ноутбуков, а я хочу что-то в самом ноутбуке.Итак, я попытался добавить аналогичный JS в ячейку Markdown, но это не работает, потому что JS очищается.

Я не уверен, что CSS также очищается, но чистый HTML работает.Есть ли хороший способ создать скрытый / сложенный текстовый абзац с чем-то вроде «нажмите здесь для получения дальнейших инструкций», чтобы показать текст?

Лучшее, что я мог придумать, это атрибут titleсоздать текст с наведением мыши, к сожалению, без дальнейшего форматирования:

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

Answer 1

Тег <details> - это чистый HTML, который делает именно это и который не удаляется дезинфицирующим средством.Он может иметь <summary> для описания содержимого сгиба.

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

См. Также: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details