diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb
index a265f3d2a..522ccd1e9 100644
--- a/app/assets/javascripts/sidebar_toggle.js.erb
+++ b/app/assets/javascripts/sidebar_toggle.js.erb
@@ -27,9 +27,21 @@
       });
     }
 
+    function toggle() {
+      var btn = $('#sideBarButton');
+      if (btn.attr('data-shown')) {
+        btn.attr('data-shown', false);
+        hide();
+      } else {
+        btn.attr('data-shown', true);
+        show();
+      }
+    }
+
     return Object.freeze({
       show: show,
-      hide: hide
+      hide: hide,
+      toggle: toggle
     })
   })();
 })(window);
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb
index 520149308..fa373f706 100644
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/app/views/shared/_left_menu_bar.html.erb
@@ -64,19 +64,22 @@
       <% end %>
     </li>
     <!-- arrow for opening/closing -->
-    <li class="text-center" style="padding: 5px;">
+    <li class="text-center"
+        style="padding: 5px;"
+        id="sideBarButton"
+        data-shown="true"
+        onclick="SideBarToggle.toggle()"
+        >
       <span id="sideBarLeft"
             class="fas fa-chevron-left"
-            aria-hidden="true"
-            onclick="SideBarToggle.hide()"
+            aria-hidden="false"
             ></span>
       <span id="sideBarRight"
             class="fas fa-chevron-right"
             aria-hidden="true"
-            onclick="SideBarToggle.show()"
             style="display:none;"
             ></span>
-    </li>   
+    </li>
   </ul>
 </div>