Category Archives: JavaScripts

JavaScript programming

Toggle the Input Fields of Jupyter Notebooks

Many people have described how to toggle the input <div> tags of a Jupyter(IPython) Notebooks. I believe Damian Kao was one of the first to blog about it. It’s pretty simple if you know a bit of jQuery. In fact, you can just use pure vanilla javascript too, but, at least for me, jQuery makes it easy to read; and since it is already an integral part of the Notebook, why not take advantage of it.

Here’s my version of the code:

Basically you select all the <div> tags of input class then toggle its visibility and height. I also hide the output prompts too by toggling <div> tags of output_prompt class.

You can add this code to your Notebook’s custom.js or even make it into an extension. But for me I only need it to render my exported html pages so I can print/publish them. For convenience, I upload it this script to my website, so I can point the src attribute of <script> to it from anywhere.

Before
toggle_0

After
toggle_1