Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML code to hide #7120

Closed
firasm opened this issue Aug 29, 2019 · 4 comments
Closed

HTML code to hide #7120

firasm opened this issue Aug 29, 2019 · 4 comments
Labels
status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion.
Milestone

Comments

@firasm
Copy link

firasm commented Aug 29, 2019

Description

I would like to use a bit of HTML to hide/show raw code in my JupyterLab notebooks (for a variety of reasons, related to my teaching of this particular class). The attached file shows a minimum working example that works in ipython notebooks but does not work in jupyterlab. When I say 'does not work' I mean, the cells run, but the HTML to hide and show the raw code does not work.

Here is the expected output when the button is clicked (to show raw data) and then clicked again (to hide it).

shown
hidden

Hidden Raw Code test.ipynb.zip

Reproduce

  1. Download .ipynb zip file
  2. unzip
  3. Try running it as a regular jupyter notebook to see expected behaviour
  4. Run in jupyter lab to see broken behaviour

N/A

Expected behavior

In jupyterlab I expect the raw code cells to be hidden when clicking the button

Context

  • Operating System and version: MacOS 10.14.6
  • Browser and version: Safari 12.1.2
  • JupyterLab version: Tested on 1.0.4 and 1.1.0
Troubleshoot Output
No output
Command Line Output
No relevant output
Browser Output
This might give a hint? 
![browser](https://user-images.githubusercontent.com/2507459/63963934-e03d1180-ca4a-11e9-98b7-864f5596f1b2.png)

Closely related to #1459 and perhaps this old method of doing it using HTML is no longer needed due to #713... will investigate.

@jasongrout
Copy link
Contributor

Right - you are using jquery in that code, and jquery is not used in JupyterLab so isn't available by default. It may work to just use normal DOM apis to do the same thing.

@jasongrout
Copy link
Contributor

Closing as answered.

@jasongrout jasongrout added this to the Reference milestone Sep 28, 2019
@ociule
Copy link

ociule commented Oct 14, 2019

FWIW, here's a version that works on Jupyter Lab. It adds jquery and uses the new div classes for input blocks in JupyterLab.

from IPython.display import HTML

HTML('''
<script src='//code.jquery.com/jquery-3.3.1.min.js'></script>
<script>
code_show=true; 
function code_toggle() {
 if (code_show){
 $('div.input').hide();
 $('div .jp-CodeCell .jp-Cell-inputWrapper').hide();
 } else {
 $('div.input').show();
 $('div .jp-CodeCell .jp-Cell-inputWrapper').show();
 }
 code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()"><input type="submit" value="Code on/off"></form>''')

Adding your own jquery may subtly mess up other things, so beware.

Edit: fixed bug.

@vidartf
Copy link
Member

vidartf commented Oct 15, 2019

Note that a cleaner way to achieve these things might be to use voila: https://github.com/voila-dashboards/voila

@lock lock bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Nov 17, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Nov 17, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion.
Projects
None yet
Development

No branches or pull requests

4 participants