如何在Python Notebook中实现代码的选择性显示与隐藏功能？

实现方案（基于JavaScript+HTML） #

这里提供两种可行的实现方式，核心都是通过JS控制代码块的显示与隐藏：

方式一：分单元格拆分实现

1. 编写绘图代码
   新建代码单元格，写入你的图表生成逻辑：

   import matplotlib.pyplot as plt
   import numpy as np
   
   x = np.linspace(0, 10, 100)
   y = np.sin(x)
   
   plt.figure(figsize=(8,4))
   plt.plot(x, y)
   plt.title('正弦曲线示例')
   plt.show()
   

2. 插入控制按钮与JS逻辑
   在绘图代码的上方新建Markdown单元格，插入以下HTML内容：

   <button onclick="toggleCode('chart-code-1')">显示/隐藏代码</button>
   <div id="chart-code-1" style="display:none; padding:12px; background:#f8f9fa; border-radius:6px;">
   

   再在绘图代码的下方新建Markdown单元格，插入闭合标签与JS函数：

   </div>
   
   <script>
   function toggleCode(elementId) {
       const target = document.getElementById(elementId);
       target.style.display = target.style.display === 'none' ? 'block' : 'none';
   }
   </script>
   

方式二：单单元格整合实现

利用IPython.display模块，在同一个代码单元格内完成按钮、绘图和控制逻辑：

from IPython.display import HTML, display

# 渲染控制按钮
display(HTML('''
<button onclick="toggleCode('inline-code')">显示/隐藏代码</button>
<div id="inline-code" style="display:none; margin:10px 0; padding:10px; background:#f8f9fa; border-radius:4px;">
'''))

# 绘图代码
import matplotlib.pyplot as plt
import numpy as np

x = np.random.randn(100)
y = np.random.randn(100)

plt.figure(figsize=(8,4))
plt.scatter(x, y, alpha=0.6)
plt.title('散点图示例')
plt.show()

# 闭合标签并加载JS函数
display(HTML('''
</div>
<script>
function toggleCode(id) {
    const elem = document.getElementById(id);
    elem.style.display = elem.style.display === 'none' ? 'block' : 'none';
}
</script>
'''))

关键注意点 #

• 每个需要控制的代码块要设置唯一的ID，避免多个按钮互相干扰
• 自定义样式可以通过修改style属性调整，比如背景色、内边距、边框等
• Jupyter Lab默认支持JavaScript运行，无需额外配置；若使用老版本Jupyter Notebook，确保未禁用JS

内容的提问来源于stack exchange，提问作者Amin Shn