Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hide a single cell in Jupyter notebook
from IPython.display import HTML
from IPython.display import display
# Taken from https://stackoverflow.com/questions/31517194/how-to-hide-one-specific-cell-input-or-output-in-ipython-notebook
tag = HTML('''<script>
code_show=true;
function code_toggle() {
if (code_show){
$('div.cell.code_cell.rendered.selected div.input').hide();
} else {
$('div.cell.code_cell.rendered.selected div.input').show();
}
code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
To show/hide this cell's raw code input, click <a href="javascript:code_toggle()">here</a>.''')
display(tag)
############### Write code below ##################
@mjiapalucci
Copy link

mjiapalucci commented Jan 16, 2019

This is brilliant! Thanks, just what I was looking for.

@mapazarr
Copy link

mapazarr commented Aug 26, 2019

Thank you!

@ShahrokhGit
Copy link

ShahrokhGit commented Nov 22, 2019

I didn't get it. How it works. Where should I put my own code?

@matthias-us
Copy link

matthias-us commented Dec 11, 2019

nice thanks

@christophergaughan
Copy link

christophergaughan commented Dec 13, 2019

I didn't get it. How it works. Where should I put my own code?

Yeah, I'm not getting this either. I just want to hide most of my code and leave other code unhidden, is there a way to do this with .ipynb files?
BTW, I have the hide code in my file on my desktop just the way I want it, it appears to ignore this on commit

@Geekgineer
Copy link

Geekgineer commented Feb 20, 2020

Thank you,
My method to use it:

1- save the below code block in txet file named 'toggle_cell.py" in the same directory of your Jupyter notebook

from IPython.core.display import display, HTML
toggle_code_str = '''
<form action="javascript:code_toggle()"><input type="submit" id="toggleButton" value="Show Sloution"></form>
'''

toggle_code_prepare_str = '''
    <script>
    function code_toggle() {
        if ($('div.cell.code_cell.rendered.selected div.input').css('display')!='none'){
            $('div.cell.code_cell.rendered.selected div.input').hide();
        } else {
            $('div.cell.code_cell.rendered.selected div.input').show();
        }
    }
    </script>

'''

display(HTML(toggle_code_prepare_str + toggle_code_str))

def toggle_code():
    display(HTML(toggle_code_str))

2- add to the first cell from toggle_cell import toggle_code as hide_sloution
3- any cell you need to add the toggle button just call hide_sloution()

Example:

image

@phase7
Copy link

phase7 commented Mar 9, 2020

I didn't get it. How it works. Where should I put my own code?

Yeah, I'm not getting this either. I just want to hide most of my code and leave other code unhidden, is there a way to do this with .ipynb files?
BTW, I have the hide code in my file on my desktop just the way I want it, it appears to ignore this on commit

  • Copy the whole code segment in this gist (from line 1 to line 22)
  • paste it in any cell in your notebook
  • Write the code segment after line 22, you know after the last commented line
  • execute that cell, you should see only one line before clicking the link
    sample

@miguelf88
Copy link

miguelf88 commented Mar 18, 2020

Is there a way to maintain this functionality when the notebook is saved as an html file?

@tpike3
Copy link

tpike3 commented Nov 6, 2020

@Geekgineer and @Zsailer Thanks!! Yours solution worked great. I know it is redundant, but seems necessary for some of my users. Would there be a way to add a second button that runs the cell?

@Kaiyiccc
Copy link

Kaiyiccc commented Jan 14, 2022

Tried this and it doesn't seem to work in JupyterLab anymore? When I click the hyperlinked 'here' it redirects me to a blank html page in my browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment