diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
index 9bd14c5c60..cee8448ae6 100644
--- a/core/client/assets/sass/layouts/editor.scss
+++ b/core/client/assets/sass/layouts/editor.scss
@@ -625,7 +625,8 @@ body.zen {
     position: relative;
     top: 1px;
 
-    &:hover {
+    &:hover,
+    &.active {
         color: $lightgrey;
     }
 }
diff --git a/core/client/toggle.js b/core/client/toggle.js
index 3073463057..87bfd345cc 100644
--- a/core/client/toggle.js
+++ b/core/client/toggle.js
@@ -4,6 +4,16 @@
 (function () {
     "use strict";
 
+    Ghost.temporary.hideToggles = function () {
+        $('[data-toggle]').each(function () {
+            var toggle = $(this).data('toggle');
+            $(this).parent().children(toggle + ':visible').fadeOut();
+        });
+
+        // Toggle active classes on menu headers
+        $("[data-toggle].active").removeClass("active");
+    };
+
     Ghost.temporary.initToggles = function ($el) {
 
         $el.find('[data-toggle]').each(function () {
@@ -14,9 +24,17 @@
         $el.find('[data-toggle]').on('click', function (e) {
             e.preventDefault();
             e.stopPropagation();
-            $(this).toggleClass('active');
-            var toggle = $(this).data('toggle');
-            $(this).parent().children(toggle).fadeToggle(200).toggleClass('open');
+            var $this = $(this),
+                toggle = $this.data('toggle'),
+                isAlreadyActive = $this.is('.active');
+
+            // Close all the other open toggle menus
+            Ghost.temporary.hideToggles();
+
+            if (!isAlreadyActive) {
+                $this.toggleClass('active');
+                $(this).parent().children(toggle).toggleClass('open').fadeToggle(200);
+            }
         });
 
     };