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

One thought on “Toggle the Input Fields of Jupyter Notebooks

  1. If you have enabled SSL in your notebook, and wish to link the .js file containing the above code from elsewhere, your shared hosting server, for example. It must linked via https instead ofhttp. Otherwise Jupyter notebook will block it.

Leave a Reply

Your email address will not be published. Required fields are marked *