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