diff --git a/http-ui/public/script.js b/http-ui/public/script.js
index 4a16e8fc3..9d8c95b61 100644
--- a/http-ui/public/script.js
+++ b/http-ui/public/script.js
@@ -114,6 +114,23 @@ function selectedFacetsToArray(facets_obj) {
   return array;
 }
 
+display_facets = false;
+$('#display_facets').click(function() {
+  if (display_facets) {
+    display_facets = false;
+    $('#display_facets').html("Display facets")
+    $('#display_facets').removeClass("is-danger");
+    $('#display_facets').addClass("is-success");
+    $('#facets').hide();
+  } else {
+    display_facets = true;
+    $('#display_facets').html("Hide facets")
+    $('#display_facets').addClass("is-danger");
+    $('#display_facets').removeClass("is-success");
+    $('#facets').show();
+  }
+});
+
 // Make the number of document a little bit prettier
 $('#docs-count').text(function(index, text) {
   return parseInt(text).toLocaleString()
diff --git a/http-ui/public/style.css b/http-ui/public/style.css
index 1de348082..ef032e51e 100644
--- a/http-ui/public/style.css
+++ b/http-ui/public/style.css
@@ -10,11 +10,19 @@
 }
 
 #facets {
+    display: none;
     max-width: 900px;
     margin: 20px auto 0 auto;
     padding: 0;
     max-height: 16em;
-  overflow: scroll;
+    overflow: scroll;
+}
+
+#display_facets {
+    margin: 20px auto 0 auto;
+    padding: 5px;
+    max-height: 16em;
+    overflow: scroll;
 }
 
 #facets .tag:hover {
diff --git a/http-ui/templates/index.html b/http-ui/templates/index.html
index 83b1a3e49..49fb0eb2b 100644
--- a/http-ui/templates/index.html
+++ b/http-ui/templates/index.html
@@ -41,6 +41,7 @@
               <p class="heading">Number of Documents</p>
               <p class="title" id="docs-count">{{ docs_count }}</p>
             </div>
+	    <button id="display_facets" class="button is-success">display facets</button>
           </div>
         </nav>
       </div>