diff --git a/visual/css/style.css b/visual/css/style.css
index 47c88cdb..0a99dda3 100644
--- a/visual/css/style.css
+++ b/visual/css/style.css
@@ -61,6 +61,61 @@ h1, h2, h3, h4, h5, h6 {
     text-decoration: underline;
 }
 
+#show_instructions_panel {
+    top: 20px;
+    left: 20px;
+    width: 550px;
+    background-color:rgba(125, 125, 125, 0.6);
+    box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
+}
+
+#show_instructions {
+    position: absolute;
+    right: 25px;
+    top: 10px;
+    font-size: 90%;
+    cursor: pointer;
+}
+
+#show_instructions:hover {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+#hide_algorithms {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 90%;
+    cursor: pointer;
+}
+
+#hide_algorithms:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
+#show_algorithms_panel {
+  right: 20px;
+  top: 20px;
+  width: 250px;
+  background-color:rgba(125, 125, 125, 0.6);
+  box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
+}
+
+#show_algorithms {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 90%;
+    cursor: pointer;
+}
+
+#show_algorithms:hover {
+    color: #fff;
+    text-decoration: underline;
+}
+
 .option_header {
     font-size: 80%;
     margin-left: 20px;
diff --git a/visual/index.html b/visual/index.html
index 59710a9e..a543e227 100644
--- a/visual/index.html
+++ b/visual/index.html
@@ -30,10 +30,14 @@
   <body>
     <div id="draw_area"></div>
 
+    <div id="show_instructions_panel" class="panel">
+      <span id="show_instructions"style="display:none">show</span>
+    </div>
+
     <div id="instructions_panel" class="panel">
       <header>
         <h2 class="header_title">Instructions</h2>
-        <span id="hide_instructions">hide</span>
+        <span id="hide_instructions"onclick="hide_instructions_clicked()">hide</span>
       </header>
       Click within the <span class="white">white</span> grid and drag your mouse to draw obstacles. <br>
       Drag the <span class="green">green</span> node to set the start position. <br>
@@ -42,8 +46,14 @@ <h2 class="header_title">Instructions</h2>
       Click Start Search in the lower-right corner to start the animation.
     </div>
 
+    <div id="show_algorithms_panel" class="panel">
+          <span id="show_algorithms"style="display:none">show</span>
+        </div>
+
     <div id="algorithm_panel" class="panel right_panel">
-      <header><h2 class="header_title">Select Algorithm</h2></header>
+      <header><h2 class="header_title">Select Algorithm</h2>
+        <span id="hide_algorithms"onclick="hide_algorithms_clicked()">hide</span>
+      </header>
 
       <div class="accordion">
         <h3 id="astar_header"><a href="#">A*</a></h3>
diff --git a/visual/js/panel.js b/visual/js/panel.js
index 19185d58..e5639b34 100644
--- a/visual/js/panel.js
+++ b/visual/js/panel.js
@@ -15,10 +15,28 @@ var Panel = {
         $('#hide_instructions').click(function() {
             $('#instructions_panel').slideUp();
         });
+        $('#hide_algorithms').click(function() {
+            $('#algorithm_panel').slideUp();
+        });
         $('#play_panel').css({
             top: $algo.offset().top + $algo.outerHeight() + 20
         });
         $('#button2').attr('disabled', 'disabled');
+
+        $('#hide_instructions').click(function(hide_instructions_clicked) {
+          $('#show_instructions').show();
+        });
+        $('#hide_algorithms').click(function(hide_algorithms_clicked) {
+          $('#show_algorithms').show();
+        });
+        $('#show_algorithms').click(function() {
+          $('#algorithm_panel').slideDown();
+          $('#show_algorithms').hide();
+        });
+        $('#show_instructions').click(function() {
+          $('#instructions_panel').slideDown();
+          $('#show_instructions').hide();
+});
     },
     /**
      * Get the user selected path-finder.
@@ -26,12 +44,12 @@ var Panel = {
      */
     getFinder: function() {
         var finder, selected_header, heuristic, allowDiagonal, biDirectional, dontCrossCorners, weight, trackRecursion, timeLimit;
-        
+
         selected_header = $(
             '#algorithm_panel ' +
             '.ui-accordion-header[aria-selected=true]'
         ).attr('id');
-        
+
         switch (selected_header) {
 
         case 'astar_header':
@@ -131,7 +149,7 @@ var Panel = {
             trackRecursion = typeof $('#jump_point_section ' +
                                      '.track_recursion:checked').val() !== 'undefined';
             heuristic = $('input[name=jump_point_heuristic]:checked').val();
-            
+
             finder = new PF.JumpPointFinder({
               trackJumpRecursion: trackRecursion,
               heuristic: PF.Heuristic[heuristic],
