diff --git a/editor/locale/lang.en.js b/editor/locale/lang.en.js
index 67b6f4b4..e87793a2 100644
--- a/editor/locale/lang.en.js
+++ b/editor/locale/lang.en.js
@@ -116,5 +116,5 @@
 {"id":"tool_node_delete","title":"Delete Node"},
 {"id":"selLayerLabel","textContent":"Move elements to:"},
 {"id":"selLayerNames","title":"Move selected elements to a different layer"},
-{"id":"sidepanel_handle","title":"Drag left/right to resize side panel","textContent":"L a y e r s"}
+{"id":"sidepanel_handle","title":"Drag left/right to resize side panel [X]","textContent":"L a y e r s"}
 ];
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 17462514..ad881cce 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -71,7 +71,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<option selected="selected" value="layer1">Layer 1</option>
 		</select>
 	</div>
-	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel">L a y e r s</div>
+	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize side panel [X]">L a y e r s</div>
 </div>
 
 <div id="logo">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 79e31117..02926d2d 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -999,6 +999,7 @@ function svg_edit_setup() {
 			[modKey+'i', function(evt){showDocProperties();evt.preventDefault();}],
 			[modKey+'c', function(evt){clickClone();evt.preventDefault();}],
 			[modKey+'g', function(evt){clickGroup();evt.preventDefault();}],
+			[modKey+'x', function(evt){toggleSidePanel();}],
 			['esc', cancelOverlays, false],
 		];
 		
@@ -1265,15 +1266,29 @@ function svg_edit_setup() {
 			if (deltax == 0) return;
 			sidedrag = evt.pageX;
 			var sidewidth = parseInt($('#sidepanels').css('width'))+deltax;
-			if (sidewidth <= 130 && sidewidth >= 1) {
+			if (sidewidth <= 130 && sidewidth >= 2) {
 				var workarea = $('#workarea');
 				var sidepanels = $('#sidepanels');
 				var layerpanel = $('#layerpanel');
 				workarea.css('right', parseInt(workarea.css('right'))+deltax);
 				sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
 				layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
+				centerCanvasIfNeeded();
 			}
 	});
+	
+	// if width is non-zero, then fully close it, otherwise fully open it
+	var toggleSidePanel = function(){
+		var w = parseInt($('#sidepanels').css('width'));
+		var deltax = (w > 2 ? 2 : 130) - w;
+		var workarea = $('#workarea');
+		var sidepanels = $('#sidepanels');
+		var layerpanel = $('#layerpanel');
+		workarea.css('right', parseInt(workarea.css('right'))+deltax);
+		sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
+		layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
+		centerCanvasIfNeeded();
+	};
 
 	var populateLayers = function(){
 		var layerlist = $('#layerlist tbody');