All you need is

.cell.selected~.unselected { display: none; }
.cell.code_cell.unselected .input { display: none; }

Concretely, paste the following in your first cell.

%%html
<style>
.cell.selected~.unselected { display: none; }
.cell.code_cell.unselected .input { display: none; }
</style>

As soon as you run it

• all cells below the currently selected cell will be hidden.
• all code will be hidden, except the code of the currently selected cell.

This means you can run through your notebook from top to bottom, revealing cells one by one, and letting your audience see previous markdown cells and outputs, while focussing on at most one code cell at any given time.

Bonus points for using interactive widgets whose state is modified after their creation, while staying visible, making for a truly interactive experience.

The above videos were produced by using this CSS trick in our 3D point cloud processing demo, see the corresponding blog post, the static slides or the reproducible source code.

JupyterLab

JupyterLab users will need three lines of css.

.jp-CodeCell .jp-Cell-inputWrapper { display: none; }
.jp-CodeCell.jp-mod-selected .jp-Cell-inputWrapper { display: block; }
.jp-Cell.jp-mod-selected~.jp-Cell { display: none; }

Reveal.js and RISE

For those who like reveal.js and are happy showing a pre-rendered notebook, exporting to slides is built into jupyter, see @mjspeck’s walkthrough.

If getting a reveal.js experience on a live notebook is what you’re after, check out the excellent RISE notebook extension, version 5.1.0 just came out!