Code for inserting a toggle/hide code button in jupyter notebooks exists (see How to hide code from cells in ipython notebook visualized with nbviewer?) and can be used when the reports are exported from Jupyter into HTML.
However this code no longer works with JupyterLab. It seems like JupyterLab changed the container names relative to Jupyter.
For Jupyter container names are <div ="input"> for code cells. For JupyterLab the closest analog looks like <div = "jp-Cell-inputWrapper">.
Using this assumption I wrote an updated javascript that seems to work in JupyterLab. I couldnt find any similar solution online and there were websites that seemed to imply javascript was deactivated for Jupyterlab for security reasons (https://github.com/jupyterlab/jupyterlab/issues/3118#).
My understanding of javascript and html is rudimentary so I wanted to know if this solution has any security issues and/or better ways to recode it. This is the code I inserted into the raw code cell in JupyterLab :
<script>
code_show="a"
var r = document.querySelector(':root')
if (code_show === "a") {
code_show="flex"
}
function code_toggle() {
var v = r.getElementsByClassName("jp-Cell-inputWrapper")
if (v.item(0).style.display === "") {
if (code_show === "none") {
for (i = 1; i < v.length-1; i++) {
v.item(i).style.display = "flex";
}
code_show = "flex"
} else {
for (i = 1; i < v.length-1; i++) {
v.item(i).style.display = "none";
}
code_show = "none"
}
}
}
</script>
<form action="javascript:code_toggle()"><input type="submit" value="TOGGLE CODE IN REPORT VIEW."></form>
