Jupyter Notebook： 設定 Cell Block 隱藏按鈕

如果今天使用 Jupyter Notebook 時，用了非常多個 Cell Block 會導致整個頁面非常凌亂，如果可以設定一個隱藏按鈕或是toggle的功能，在不同區塊之間除錯也會比較容易，而這部分可以藉由插入 Jupyter 的 JavaScript API 來完成。

程式碼

from IPython.display import HTML
import random

def hide_toggle(for_next=False, hide_output=False):
    this_cell = """$('div.cell.code_cell.rendered.selected')"""
    next_cell = this_cell + '.next()'

    toggle_text = 'Toggle show/hide'  # text shown on toggle link
    target_cell = this_cell  # target cell to control with toggle
    js_hide_current = ''  # bit of JS to permanently hide code in current cell (only when toggling next cell)

    if for_next:
        target_cell = next_cell
        toggle_text += ' next cell'
        js_hide_current = this_cell + '.find("div.input").hide();'
        js_hide_current2 = this_cell + '.find("div.output").hide();'

    js_f_name = 'code_toggle_{}'.format(str(random.randint(1,2**64)))

    if hide_output and for_next:
        html = """
            <script>
                function {f_name}() {{
                    {cell_selector}.find('div.input').toggle();
                    {cell_selector}.find('div.output').toggle();
                }}

                {js_hide_current}
                {js_hide_current2}
            </script>

            <form action="javascript:{f_name}()">
                Toggle (Input & Output) <input type="submit" id="toggleButton" value="Show/Hide">
            </form>
        """.format(
            f_name=js_f_name,
            cell_selector=target_cell,
            js_hide_current=js_hide_current, 
            js_hide_current2=js_hide_current2, 
            toggle_text=toggle_text
        )
    else:
        html = """
            <script>
                function {f_name}() {{
                    {cell_selector}.find('div.input').toggle();
                }}

                {js_hide_current}
            </script>

            <form action="javascript:{f_name}()">
                Toggle (Input & Output) <input type="submit" id="toggleButton" value="Show/Hide">
            </form>
        """.format(
        f_name=js_f_name,
        cell_selector=target_cell,
        js_hide_current=js_hide_current, 
        toggle_text=toggle_text,
        )

    return HTML(html)

呼叫 hide_toogle function 來隱藏程式碼 (intput)

這邊的功能是為目前 Cell 的程式碼區塊添加 Toggle 功能。
(這樣就可以專注在輸出結果上)

hide_toggle()

呼叫 hide_toogle function 直接摺疊下一個 Cell 的程式碼及輸出結果 (input & output)

這邊的功能是為下一個 Cell 的程式碼及輸出結果，添加 Toggle 功能。

hide_toggle(for_next=True, hide_output=True)