not hiding the elements for alt-m, just lowering opacity

public/javascripts/init.js

@@ -6,10 +6,7 @@ jQuery.hotkeys.options.filterContentEditable = false;
 jQuery.hotkeys.options.filterTextInputs = false;
 
 $(document).bind('keydown', 'alt+m', e => {
-    const toggle = $(".hide-toggle");
-    const hidden = toggle.css('visibility') === 'hidden';
-
-    toggle.css('visibility', hidden ? 'visible' : 'hidden');
+    $(".hide-toggle").toggleClass("suppressed");
 
     e.preventDefault();
 });

public/stylesheets/style.css

@@ -197,6 +197,10 @@ div.ui-tooltip {
     overflow: scroll;
 }
 
+.suppressed {
+    filter: opacity(7%);
+}
+
 #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}
 #loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#777;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
 #loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#aaa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}

views/index.ejs

@@ -67,7 +67,7 @@
       <div id="tree" class="hide-toggle" style="grid-area: tree; overflow: auto;">
       </div>
 
-      <div id="parent-list">
+      <div id="parent-list" class="hide-toggle">
         <p><strong>Note locations:</strong></p>
 
         <ul id="parent-list-list"></ul>