75

In my notebook, I have a cell returning temp calculation results. It's a bit long, so after it is run, I want to hide it and when needed, to show it.

To do it manually, I can double click the left side of the output, to hide it

enter image description here

After double click enter image description here

But is there any way I can do this by code? For example,

the last line of the cell, use a command like %%hide output, and the output would be hidden after finished running.

Additionally, can I get this feature in output HTML?

Thomas K
  • 39,200
  • 7
  • 84
  • 86
ZK Zhao
  • 19,885
  • 47
  • 132
  • 206
  • The only way to control it from the code in the notebook would be to produce custom HTML output that has a hide/show button. – Thomas K May 11 '16 at 10:22
  • @ThomasK, so I can not `automatically` hide the output by output something? – ZK Zhao May 11 '16 at 15:20
  • You might actually be able to 'display' some Javascript that gets executed and does it, but it's a bit hackish. I don't know what the JS invocation for it would be. – Thomas K May 11 '16 at 17:15

13 Answers13

78

Add ; by the end of the cell to hide the output of that cell.

Raniere Silva
  • 2,527
  • 1
  • 18
  • 34
54

In the newer versions(5.0.0 at the time I'm writing this), pressing o in the command mode hides the output of the cell in focus. The same happens if you triple click in front of the output.

o is

Sundeep
  • 1,536
  • 5
  • 23
  • 35
25

You can add %%capture to the beginning of the cell.

Jupyter provides a magic cell command called %%capture that allows you to capture all of to outputs from that cell.

You can use it like this:

%%capture test print('test')

test.stdout => 'test\n'

https://ipython.readthedocs.io/en/stable/interactive/magics.html

17

In newer versions of Jupiter Notebook, select the desired cell, make sure you're in command mode and then on the menubar press Cell > Current Outputs. You have then three options:

  • Toggle (press O in the command mode to apply the same effect)
  • Toggle Scrolling (the default output)
  • Clear (to clear the output all together)

Image to Menubar Options

Additionally, you can apply the same effect to all the cells in your document if you chose All Output instead of Current Output.

KareemJ
  • 744
  • 10
  • 15
4

Not exactly what you are after, but the effect might be good enough for your purposes:

Look into the %%capture magic (https://nbviewer.jupyter.org/github/ipython/ipython/blob/1.x/examples/notebooks/Cell%20Magics.ipynb). It lets you assign that cell output to a variable. By calling that variable later you could see the output.

Jacob
  • 41
  • 1
1

Based on this, I just came up with this for myself a few minutes ago:

%%javascript

$('#maintoolbar-container').children('#toggleButton').remove()

var toggle_button = ("<button id='toggleButton' type='button'>Show Code</button>");
$('#maintoolbar-container').append(toggle_button);

var code_shown = false;

function code_toggle()
{

    if (code_shown)
    {
        console.log("code shown")
        $('div.input').hide('500');
        $('#toggleButton').text('Show Code');
    }
    else
    {
        console.log("code not shown")
        $('div.input').show('500');
        $('#toggleButton').text('Hide Code');
    }

    code_shown = !code_shown;
}

$(document).ready(function()
{
    code_shown=false;
    $('div.input').hide();
});

$('#toggleButton').on('click', code_toggle);

It does have a glitch: each time you run that cell (which I put at the top), it adds a button. So, that is something that needs to be fixed. Would need to check in the maintoolbar-container to see if the button already exists, and then not add it.

EDIT

I added the necessary piece of code:

$('#maintoolbar-container').children('#toggleButton').remove()
abalter
  • 9,663
  • 17
  • 90
  • 145
1

You can use the notebook utils from https://github.com/google/etils:

!pip install etils[ecolab]

from etils import ecolab

with etils.collapse():
  print('This content will be hidden by default')

It will capture the stdout/stderr output and display it a some collapsible section.

Internally, this is more or less equivalent to:

import contextlib
import html
import io
import IPython.display


@contextlib.contextmanager
def collapse(name: str = ''):
  f = io.StringIO()
  with contextlib.redirect_stderr(f):
    with contextlib.redirect_stdout(f):
      yield
  name = html.escape(name)
  content = f.getvalue()
  content = html.escape(content)
  content = f'<pre><code>{content}</code></pre>'
  content = IPython.display.HTML(
      f'<details><summary>{name}</summary>{content}</details>')
  IPython.display.display(content)

enter image description here

The section is collapsed by default, but I uncollapsed it for the screenshot.

Conchylicultor
  • 4,631
  • 2
  • 37
  • 40
  • this is a nice hack, any of the other methods did not work in my case as the output was logged from lower-level libraries. – tuned Sep 10 '21 at 13:10
  • this is great! in contrast to jupyter_contrib_nbextensions, it also works as html file. is this somehow possible to extend to graphs as well? – Felix Dietrich Aug 25 '22 at 13:50
1

To prepend a cell from getting rendered in the output, in the notebook, by voilo or voila gridstack, just put in the first line of each cell to hide the output:

%%capture --no-display

reference in ipypthon documentation

  • Is the addition of `--no-display` to [Hugo's posted answer](https://stackoverflow.com/a/59718646/8508004) necessary for Voila? You don't need `--no-display` for a notebook unless something has changed recently. – Wayne Mar 08 '22 at 18:31
  • Well this worked on my setup surpessing cell as output using voila. I was searching for getting only some cells rendered in voila running ```bash voila --template=gridstack ``` This brings up a voila website with a file list that includes the notebooks. Without %%capture --no-display also unwanted cell got displayed. So may be there is a better trick. I also can not judge if something has changed reacently. Any idea? – user8504816 Mar 10 '22 at 08:04
  • I just tested, and the addition of ` --no-display` is not necessary for Voila, **`%%capture` alone is enough** to block the output from showing in the Voila rendering. And so I'd suggest your answer hasn't added much new here and perhaps the fact that `%%capture` or the `%%capture --no-display`-variant works for Voila would probably have been better as a comment below [Hugo's posted answer](https://stackoverflow.com/a/59718646/8508004) as your suggestion is pretty much the same. Or at least add to yours that `%%capture` alone is sufficient to your answer & throw Hugo an upvote, if you haven't. – Wayne Mar 10 '22 at 19:04
  • 1
    As in the ipython document --no-display is optional. It is described in the IPython documentation "Don’t capture IPython’s rich display". So that's what I intended and get it more selective. But working without it works, but it is less selective. So I your happy I'm fine as well – user8504816 Mar 15 '22 at 15:08
1

Double click on left part of output of jupyter notebook cell.enter image description here

0

For Windows, in Jupyter Notebook, click the cell whose output you want to hide. Click Esc + o for toggling the output

CHEEKATLAPRADEEP
  • 12,191
  • 1
  • 19
  • 42
0

So I totally understand. When you have like 100 different plot and when you do the "Restart & Run All" those ugly plots all show up again

what you can do is ctrl+A and press o it will all of a sudden hide all your cells!!! For you to collapse automatically, you may need to use JupyterLab (another level after JupyterNotebook) but still, by doing ctrl+A then o you will be able to collapse all the results!!!

ctrl+A --> select ALL (make sure to click outside of coding box before you do it!)
o --> toggle collapse

0

Also you can right click the cell, and then press "Clear outputs"

-1

If you don't mind a little hacking, then you may write a simple script for inverting the "collapsed" attribute of each cell from false to true in the notebook .ipynb file (which is a simple JSON file). This is however may fail in the future if a the .ipynb format changes.