diff --git a/src/index.html b/src/index.html
index 6f50e29..ee5bf47 100644
--- a/src/index.html
+++ b/src/index.html
@@ -128,9 +128,6 @@
 			background: var(--color-bg);
 			transition: height 0.30s ease, width 0.30s ease;
 			will-change: height;
-			/*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/
-			/*animation: pop-in 0.4s ease forwards 0.2s;*/
-			/*opacity: 0;*/
 		}
 		.layout-2 .code-wrap.is-minimized {
 			flex-direction: row;
@@ -634,8 +631,8 @@
 			</div>
 			<div class="content-wrap  flex  flex-grow">
 				<div class="code-side" id="js-code-side">
-					<div id="js-html-code" data-type="html" class="code-wrap">
-						<div class="code-wrap__header">
+					<div data-code-wrap-id="0" id="js-html-code" data-type="html" class="code-wrap">
+						<div class="js-code-wrap__header  code-wrap__header" title="Double click to toggle code pane">
 							<div class="btn-group" dropdown title="Click to change">
 								<span id="js-html-mode-label" class="code-wrap__header-label">HTML</span><span class="caret"></span>
 								<ul class="js-modes-menu  dropdown__menu">
@@ -645,13 +642,13 @@
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
-								<a data-collapse-id="0" class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn">
+								<a class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn" title="Toggle code pane">
 								</a>
 							</div>
 						</div>
 					</div>
-					<div id="js-css-code" data-type="css" class="code-wrap">
-						<div class="code-wrap__header">
+					<div data-code-wrap-id="1" id="js-css-code" data-type="css" class="code-wrap">
+						<div class="js-code-wrap__header  code-wrap__header" title="Double click to toggle code pane">
 							<div class="btn-group" dropdown title="Click to change">
 								<span id="js-css-mode-label" class="code-wrap__header-label">CSS</span><span class="caret"></span>
 								<ul class="js-modes-menu  dropdown__menu">
@@ -661,13 +658,13 @@
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
-								<a data-collapse-id="1" class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn">
+								<a class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn" title="Toggle code pane">
 								</a>
 							</div>
 						</div>
 					</div>
-					<div id="js-js-code" data-type="js" class="code-wrap">
-						<div class="code-wrap__header">
+					<div data-code-wrap-id="2" id="js-js-code" data-type="js" class="code-wrap">
+						<div class="js-code-wrap__header  code-wrap__header" title="Double click to toggle code pane">
 							<div class="btn-group" dropdown title="Click to change">
 								<span id="js-js-mode-label" class="code-wrap__header-label">JS</span><span class="caret"></span>
 								<ul class="js-modes-menu  dropdown__menu">
@@ -677,7 +674,7 @@
 								</ul>
 							</div>
 							<div class="code-wrap__header-right-options">
-								<a data-collapse-id="2" class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn">
+								<a class="js-code-collapse-btn  code-wrap__header-btn  code-wrap__collapse-btn" title="Toggle code pane">
 								</a>
 							</div>
 						</div>
diff --git a/src/script.js b/src/script.js
index 37f23da..f9f0ee3 100644
--- a/src/script.js
+++ b/src/script.js
@@ -97,6 +97,16 @@
 		}, 50);
 	}
 
+	function toggleCodeWrapCollapse(codeWrapEl) {
+		if (codeWrapEl.classList.contains('is-minimized')) {
+			codeWrapEl.classList.remove('is-minimized');
+			codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
+		} else {
+			codeSplitInstance.collapse(parseInt(codeWrapEl.dataset.codeWrapId, 10));
+			codeWrapEl.classList.add('is-minimized');
+		}
+	}
+
 	function resetSplitting(dontRecreate) {
 		if (codeSplitInstance) {
 			codeSplitInstance.destroy();
@@ -109,8 +119,12 @@
 			direction: (currentLayoutMode === 2 ? 'horizontal' : 'vertical'),
 			minSize: minCodeWrapSize,
 			gutterSize: 6,
-			onDragEnd: function() {
+			onDragStart: function () {
+				document.body.classList.add('is-dragging');
+			},
+			onDragEnd: function () {
 				updateCodeWrapCollapseStates();
+				document.body.classList.remove('is-dragging');
 			}
 		};
 		if (currentItem && currentItem.sizes) {
@@ -118,7 +132,7 @@
 		} else {
 			options.sizes = [ 33.33, 33.33, 33.33 ];
 		}
-		utils.log('reset spliiting', options.sizes)
+		// utils.log('reset spliiting', options.sizes)
 		codeSplitInstance = Split(['#js-html-code', '#js-css-code', '#js-js-code'], options);
 		mainSplitInstance = Split(['#js-code-side', '#js-demo-side' ], {
 			direction: (currentLayoutMode === 2 ? 'vertical' : 'horizontal'),
@@ -743,16 +757,7 @@
 		collapseBtns.forEach(function (btn) {
 			btn.addEventListener('click', function (e) {
 				var codeWrapParent = e.currentTarget.parentElement.parentElement.parentElement;
-				if (codeWrapParent.classList.contains('is-minimized')) {
-					// e.currentTarget.classList.remove('is-minimized');
-					codeWrapParent.classList.remove('is-minimized');
-					codeSplitInstance.setSizes([ 33.3, 33.3, 33.3 ]);
-				} else {
-					// codeSplitInstance.setSizes([ 0, 50, 50 ]);
-					codeSplitInstance.collapse(parseInt(e.currentTarget.dataset.collapseId, 10));
-					// e.currentTarget.classList.add('is-minimized');
-					codeWrapParent.classList.add('is-minimized');
-				}
+				toggleCodeWrapCollapse(codeWrapParent);
 				return false;
 			});
 		});
@@ -782,6 +787,13 @@
 				toggleSavedItemsPane(false);
 			}
 		});
+		window.addEventListener('dblclick', function(e) {
+			var target = e.target;
+			if (target.classList.contains('js-code-wrap__header')) {
+				var codeWrapParent = target.parentElement;
+				toggleCodeWrapCollapse(codeWrapParent);
+			}
+		});
 
 		utils.onButtonClick(settingsBtn, function() {
 			if (chrome.runtime.openOptionsPage) {
@@ -816,14 +828,6 @@
 		externalJsTextarea.addEventListener('change', onExternalLibChange);
 		externalCssTextarea.addEventListener('change', onExternalLibChange);
 
-		// TODO: move to split.js ondrag listeners
-		window.addEventListener('mousedown', function() {
-			document.body.classList.add('is-dragging');
-		});
-		window.addEventListener('mouseup', function() {
-			document.body.classList.remove('is-dragging');
-		});
-
 		chrome.storage.local.get({
 			layoutMode: 1,
 			code: ''