Merge pull request #7097 from jasongrout/widget-visibility

Expand the semantics of the widget visible attribute to allow for visibility: hidden

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) {

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.")
     

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