diff --git a/css/80_app.css b/css/80_app.css
index 74cf2d8bc..ee38b64c3 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -812,6 +812,9 @@ a.hide-toggle {
     left: -6px;
 }
 
+.sidebar.collapsed > *:not(.sidebar-resizer) {
+    display: none;
+}
 .sidebar.collapsed .sidebar-resizer {
     /* make target wider to avoid the user accidentally resizing window */
     width: 10px;
diff --git a/modules/ui/sidebar.js b/modules/ui/sidebar.js
index 8595bc9ca..78bdce1e6 100644
--- a/modules/ui/sidebar.js
+++ b/modules/ui/sidebar.js
@@ -379,7 +379,13 @@ export function uiSidebar(context) {
                 endMargin = 0;
             }
 
-            selection.transition()
+            if (!isCollapsing) {
+                // unhide the sidebar's content before it transitions onscreen
+                selection.classed('collapsed', isCollapsing);
+            }
+
+            selection
+                .transition()
                 .style(xMarginProperty, endMargin + 'px')
                 .tween('panner', function() {
                     var i = d3_interpolateNumber(startMargin, endMargin);
@@ -390,7 +396,10 @@ export function uiSidebar(context) {
                     };
                 })
                 .on('end', function() {
-                    selection.classed('collapsed', isCollapsing);
+                    if (isCollapsing) {
+                        // hide the sidebar's content after it transitions offscreen
+                        selection.classed('collapsed', isCollapsing);
+                    }
 
                     // switch back from px to %
                     if (!isCollapsing) {