diff --git a/IPython/html/static/widgets/js/widget.js b/IPython/html/static/widgets/js/widget.js
index 3deeea3..19a120c 100644
--- a/IPython/html/static/widgets/js/widget.js
+++ b/IPython/html/static/widgets/js/widget.js
@@ -553,7 +553,14 @@ define(["widgets/js/manager",
/**
* Update visibility
*/
- this.$el.toggle(value);
+ switch(value) {
+ case null: // python None
+ this.$el.show().css('visibility', 'hidden'); break;
+ case false:
+ this.$el.hide(); break;
+ case true:
+ this.$el.show().css('visibility', ''); break;
+ }
},
update_css: function (model, css) {
diff --git a/IPython/html/widgets/widget.py b/IPython/html/widgets/widget.py
index 989b1e4..515a2bb 100644
--- a/IPython/html/widgets/widget.py
+++ b/IPython/html/widgets/widget.py
@@ -428,7 +428,7 @@ class Widget(LoggingConfigurable):
class DOMWidget(Widget):
- visible = Bool(True, help="Whether the widget is visible.", sync=True)
+ visible = Bool(True, allow_none=True, help="Whether the widget is visible. False collapses the empty space, while None preserves the empty space.", sync=True)
_css = Tuple(sync=True, help="CSS property list: (selector, key, value)")
_dom_classes = Tuple(sync=True, help="DOM classes applied to widget.$el.")
diff --git a/examples/Interactive Widgets/Widget Styling.ipynb b/examples/Interactive Widgets/Widget Styling.ipynb
index 7156d05..2181714 100644
--- a/examples/Interactive Widgets/Widget Styling.ipynb
+++ b/examples/Interactive Widgets/Widget Styling.ipynb
@@ -636,7 +636,10 @@
"metadata": {},
"source": [
"Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n",
- "The `visibility` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below)."
+ "The `visible` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below). The `visible` property can be:\n",
+ "* `True` - the widget is displayed\n",
+ "* `False` - the widget is hidden, and the empty space where the widget would be is collapsed\n",
+ "* `None` - the widget is hidden, and the empty space where the widget would be is shown"
]
},
{
@@ -647,8 +650,21 @@
},
"outputs": [],
"source": [
- "string = widgets.Latex(value=\"Hello World!\")\n",
- "display(string) "
+ "w1 = widgets.Latex(value=\"First line\")\n",
+ "w2 = widgets.Latex(value=\"Second line\")\n",
+ "w3 = widgets.Latex(value=\"Third line\")\n",
+ "display(w1, w2, w3)"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {
+ "collapsed": true
+ },
+ "outputs": [],
+ "source": [
+ "w2.visible=None"
]
},
{
@@ -659,7 +675,7 @@
},
"outputs": [],
"source": [
- "string.visible=False"
+ "w2.visible=False"
]
},
{
@@ -670,7 +686,7 @@
},
"outputs": [],
"source": [
- "string.visible=True"
+ "w2.visible=True"
]
},
{
@@ -737,15 +753,22 @@
]
],
"kernelspec": {
+ "display_name": "Python 2",
+ "name": "python2"
+ },
+ "language_info": {
"codemirror_mode": {
- "name": "python",
+ "name": "ipython",
"version": 2
},
- "display_name": "Python 2",
- "language": "python",
- "name": "python2"
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython2",
+ "version": "2.7.8"
},
- "signature": "sha256:8bb091be85fd5e7f76082b1b4b98cddec92a856334935ac2c702fe5ec03f6eff"
+ "signature": "sha256:198630bf2c2eb00401b60a395ebc75049099864b62f0faaf416da02f9808c40b"
},
"nbformat": 4,
"nbformat_minor": 0