diff --git a/core/src/main/resources/org/apache/spark/ui/static/additional-metrics.js b/core/src/main/resources/org/apache/spark/ui/static/additional-metrics.js
deleted file mode 100644
index 3798dc47529a..000000000000
--- a/core/src/main/resources/org/apache/spark/ui/static/additional-metrics.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* Register functions to show/hide columns based on checkboxes. These need
- * to be registered after the page loads. */
-$(function() {
-    $("span.expand-additional-metrics").click(function(){
-        var status = window.localStorage.getItem("expand-additional-metrics") == "true";
-        status = !status;
-
-        // Expand the list of additional metrics.
-        var additionalMetricsDiv = $(this).parent().find('.additional-metrics');
-        $(additionalMetricsDiv).toggleClass('collapsed');
-
-        // Switch the class of the arrow from open to closed.
-        $(this).find('.expand-additional-metrics-arrow').toggleClass('arrow-open');
-        $(this).find('.expand-additional-metrics-arrow').toggleClass('arrow-closed');
-
-        window.localStorage.setItem("expand-additional-metrics", "" + status);
-    });
-
-    if (window.localStorage.getItem("expand-additional-metrics") == "true") {
-        // Set it to false so that the click function can revert it
-        window.localStorage.setItem("expand-additional-metrics", "false");
-        $("span.expand-additional-metrics").trigger("click");
-    }
-
-    stripeSummaryTable();
-
-    $('input[type="checkbox"]').click(function() {
-        var name = $(this).attr("name")
-        var column = "table ." + name;
-        var status = window.localStorage.getItem(name) == "true";
-        status = !status;
-        $(column).toggle();
-        stripeSummaryTable();
-        window.localStorage.setItem(name, "" + status);
-    });
-
-    $("#select-all-metrics").click(function() {
-       var status = window.localStorage.getItem("select-all-metrics") == "true";
-       status = !status;
-       if (this.checked) {
-          // Toggle all un-checked options.
-          $('input[type="checkbox"]:not(:checked)').trigger('click');
-       } else {
-          // Toggle all checked options.
-          $('input[type="checkbox"]:checked').trigger('click');
-       }
-       window.localStorage.setItem("select-all-metrics", "" + status);
-    });
-
-    if (window.localStorage.getItem("select-all-metrics") == "true") {
-        $("#select-all-metrics").attr('checked', status);
-    }
-
-    $("span.additional-metric-title").parent().find('input[type="checkbox"]').each(function() {
-        var name = $(this).attr("name")
-        // If name is undefined, then skip it because it's the "select-all-metrics" checkbox
-        if (name && window.localStorage.getItem(name) == "true") {
-            // Set it to false so that the click function can revert it
-            window.localStorage.setItem(name, "false");
-            $(this).trigger("click")
-        }
-    });
-
-    // Trigger a click on the checkbox if a user clicks the label next to it.
-    $("span.additional-metric-title").click(function() {
-        $(this).parent().find('input[type="checkbox"]').trigger('click');
-    });
-
-    // Show/hide full job description on click event.
-    $(".description-input").click(function() {
-        $(this).toggleClass("description-input-full");
-    });
-});
diff --git a/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html b/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html
index f2c17aef097a..b236857cb4d7 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html
+++ b/core/src/main/resources/org/apache/spark/ui/static/executorspage-template.html
@@ -16,6 +16,7 @@
 -->
 
 <script id="executors-summary-template" type="text/html">
+  <div id="showAdditionalMetrics"></div>
   <h4 class="title-table">Summary</h4>
   <div class="container-fluid">
     <div class="container-fluid">
@@ -26,11 +27,11 @@ <h4 class="title-table">Summary</h4>
         <th><span data-toggle="tooltip"
                   title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">Storage Memory</span>
         </th>
-        <th class="on_heap_memory">
+        <th>
           <span data-toggle="tooltip"
                 title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">On Heap Storage Memory</span>
         </th>
-        <th class="off_heap_memory">
+        <th>
           <span data-toggle="tooltip"
                 title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">Off Heap Storage Memory</span>
         </th>
@@ -81,11 +82,11 @@ <h4 class="title-table">Executors</h4>
             <span data-toggle="tooltip" data-placement="top"
                   title="Memory used / total available memory for storage of data like RDD partitions cached in memory.">
               Storage Memory</span></th>
-          <th class="on_heap_memory">
+          <th>
             <span data-toggle="tooltip" data-placement="top"
                   title="Memory used / total available memory for on heap storage of data like RDD partitions cached in memory.">
               On Heap Storage Memory</span></th>
-          <th class="off_heap_memory">
+          <th>
             <span data-toggle="tooltip"
                   title="Memory used / total available memory for off heap storage of data like RDD partitions cached in memory.">
               Off Heap Storage Memory</span></th>
diff --git a/core/src/main/resources/org/apache/spark/ui/static/executorspage.js b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
index 98d67c91f24b..17cb68c3026c 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
+++ b/core/src/main/resources/org/apache/spark/ui/static/executorspage.js
@@ -105,10 +105,31 @@ function totalDurationColor(totalGCTime, totalDuration) {
     return (totalGCTime > GCTimePercent * totalDuration) ? "white" : "black";
 }
 
+var sumOptionalColumns = [3, 4];
+var execOptionalColumns = [5, 6];
+var execDataTable;
+var sumDataTable;
+
+function reselectCheckboxesBasedOnTaskTableState() {
+    var allChecked = true;
+    if (typeof execDataTable !== "undefined") {
+        for (var k = 0; k < execOptionalColumns.length; k++) {
+            if (execDataTable.column(execOptionalColumns[k]).visible()) {
+                $("[data-exec-col-idx=" + execOptionalColumns[k] + "]").prop("checked", true);
+            } else {
+                allChecked = false;
+            }
+        }
+    }
+    if (allChecked) {
+        $("#select-all-box").prop("checked", true);
+    }
+}
+
 $(document).ready(function () {
     setDataTableDefaults();
 
-    executorsSummary = $("#active-executors");
+    var executorsSummary = $("#active-executors");
 
     getStandAloneAppId(function (appId) {
 
@@ -367,9 +388,6 @@ $(document).ready(function () {
                                 else
                                     return (formatBytes(row.memoryMetrics.usedOnHeapStorageMemory, type) + ' / ' +
                                         formatBytes(row.memoryMetrics.totalOnHeapStorageMemory, type));
-                            },
-                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('on_heap_memory')
                             }
                         },
                         {
@@ -379,9 +397,6 @@ $(document).ready(function () {
                                 else
                                     return (formatBytes(row.memoryMetrics.usedOffHeapStorageMemory, type) + ' / ' +
                                         formatBytes(row.memoryMetrics.totalOffHeapStorageMemory, type));
-                            },
-                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('off_heap_memory')
                             }
                         },
                         {data: 'diskUsed', render: formatBytes},
@@ -428,12 +443,16 @@ $(document).ready(function () {
                             }
                         }
                     ],
-                    "order": [[0, "asc"]]
+                    "order": [[0, "asc"]],
+                    "columnDefs": [
+                        {"visible": false, "targets": 5},
+                        {"visible": false, "targets": 6}
+                    ]
                 };
-    
-                var dt = $(selector).DataTable(conf);
-                dt.column('executorLogsCol:name').visible(logsExist(response));
-                dt.column('threadDumpCol:name').visible(getThreadDumpEnabled());
+
+                execDataTable = $(selector).DataTable(conf);
+                execDataTable.column('executorLogsCol:name').visible(logsExist(response));
+                execDataTable.column('threadDumpCol:name').visible(getThreadDumpEnabled());
                 $('#active-executors [data-toggle="tooltip"]').tooltip();
     
                 var sumSelector = "#summary-execs-table";
@@ -463,9 +482,6 @@ $(document).ready(function () {
                                 else
                                     return (formatBytes(row.allOnHeapMemoryUsed, type) + ' / ' +
                                         formatBytes(row.allOnHeapMaxMemory, type));
-                            },
-                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('on_heap_memory')
                             }
                         },
                         {
@@ -475,9 +491,6 @@ $(document).ready(function () {
                                 else
                                     return (formatBytes(row.allOffHeapMemoryUsed, type) + ' / ' +
                                         formatBytes(row.allOffHeapMaxMemory, type));
-                            },
-                            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
-                                $(nTd).addClass('off_heap_memory')
                             }
                         },
                         {data: 'allDiskUsed', render: formatBytes},
@@ -520,13 +533,69 @@ $(document).ready(function () {
                     ],
                     "paging": false,
                     "searching": false,
-                    "info": false
+                    "info": false,
+                    "columnDefs": [
+                        {"visible": false, "targets": 3},
+                        {"visible": false, "targets": 4}
+                    ]
 
                 };
     
-                $(sumSelector).DataTable(sumConf);
+                sumDataTable = $(sumSelector).DataTable(sumConf);
                 $('#execSummary [data-toggle="tooltip"]').tooltip();
-    
+
+                $("#showAdditionalMetrics").append(
+                    "<div><a id='additionalMetrics'>" +
+                    "<span class='expand-input-rate-arrow arrow-closed' id='arrowtoggle-optional-metrics'></span>" +
+                    "Show Additional Metrics" +
+                    "</a></div>" +
+                    "<div class='container-fluid container-fluid-div' id='toggle-metrics' hidden>" +
+                    "<div><input type='checkbox' class='toggle-vis' id='select-all-box'>Select All</div>" +
+                    "<div id='on_heap_memory' class='on-heap-memory-checkbox-div'><input type='checkbox' class='toggle-vis' data-sum-col-idx='3' data-exec-col-idx='5'>On Heap Memory</div>" +
+                    "<div id='off_heap_memory' class='off-heap-memory-checkbox-div'><input type='checkbox' class='toggle-vis' data-sum-col-idx='4' data-exec-col-idx='6'>Off Heap Memory</div>" +
+                    "</div>");
+
+                reselectCheckboxesBasedOnTaskTableState();
+
+                $("#additionalMetrics").click(function() {
+                    $("#arrowtoggle-optional-metrics").toggleClass("arrow-open arrow-closed");
+                    $("#toggle-metrics").toggle();
+                    if (window.localStorage) {
+                        window.localStorage.setItem("arrowtoggle-optional-metrics-class", $("#arrowtoggle-optional-metrics").attr('class'));
+                    }
+                });
+
+                $(".toggle-vis").on("click", function() {
+                    var thisBox = $(this);
+                    if (thisBox.is("#select-all-box")) {
+                        var sumColumn = sumDataTable.columns(sumOptionalColumns);
+                        var execColumn = execDataTable.columns(execOptionalColumns);
+                        if (thisBox.is(":checked")) {
+                            $(".toggle-vis").prop("checked", true);
+                            sumColumn.visible(true);
+                            execColumn.visible(true);
+                        } else {
+                            $(".toggle-vis").prop("checked", false);
+                            sumColumn.visible(false);
+                            execColumn.visible(false);
+                        }
+                    } else {
+                        var execColIdx = thisBox.attr("data-exec-col-idx");
+                        var execCol = execDataTable.column(execColIdx);
+                        execCol.visible(!execCol.visible());
+                        var sumColIdx = thisBox.attr("data-sum-col-idx");
+                        var sumCol = sumDataTable.column(sumColIdx);
+                        sumCol.visible(!sumCol.visible());
+                    }
+                });
+
+                if (window.localStorage) {
+                    if (window.localStorage.getItem("arrowtoggle-optional-metrics-class") != null &&
+                        window.localStorage.getItem("arrowtoggle-optional-metrics-class").includes("arrow-open")) {
+                        $("#arrowtoggle-optional-metrics").toggleClass("arrow-open arrow-closed");
+                        $("#toggle-metrics").toggle();
+                    }
+                }
             });
         });
     });
diff --git a/core/src/main/resources/org/apache/spark/ui/static/webui.css b/core/src/main/resources/org/apache/spark/ui/static/webui.css
index fe5bb25687af..3e28816ba61b 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/webui.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/webui.css
@@ -159,15 +159,11 @@ pre {
   display: none;
 }
 
-span.expand-additional-metrics, span.expand-dag-viz, span.collapse-table {
+span.expand-dag-viz, span.collapse-table {
   cursor: pointer;
 }
 
-span.additional-metric-title {
-  cursor: pointer;
-}
-
-.additional-metrics.collapsed, .collapsible-table.collapsed {
+.collapsible-table.collapsed {
   display: none;
 }
 
@@ -206,14 +202,6 @@ span.additional-metric-title {
   color: #777;
 }
 
-/* Hide all additional metrics by default. This is done here rather than using JavaScript to
- * avoid slow page loads for stage pages with large numbers (e.g., thousands) of tasks. */
-.scheduler_delay, .deserialization_time, .fetch_wait_time, .shuffle_read_remote,
-.serialization_time, .getting_result_time, .peak_execution_memory,
-.on_heap_memory, .off_heap_memory {
-  display: none;
-}
-
 .accordion-inner {
   background: #f5f5f5;
 }
@@ -361,4 +349,4 @@ a.expandbutton {
 
 #active-executors-table th:first-child {
   border-left: 1px solid #dddddd;
-}
\ No newline at end of file
+}
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index 197072c11290..11d38318b48e 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -178,7 +178,6 @@ private[spark] object UIUtils extends Logging {
     <script src={prependBaseUri(request, "/static/bootstrap-tooltip.js")}></script>
     <script src={prependBaseUri(request, "/static/initialize-tooltips.js")}></script>
     <script src={prependBaseUri(request, "/static/table.js")}></script>
-    <script src={prependBaseUri(request, "/static/additional-metrics.js")}></script>
     <script src={prependBaseUri(request, "/static/timeline-view.js")}></script>
     <script src={prependBaseUri(request, "/static/log-view.js")}></script>
     <script src={prependBaseUri(request, "/static/webui.js")}></script>