Add Expand All and Collapse All

2 files changed, 17 insertions, 7 deletions

diff --git a/util/gh-pages/index.html b/util/gh-pages/index.html
index 8de36fc4005..d4cec81bcd9 100644
--- a/util/gh-pages/index.html
+++ b/util/gh-pages/index.html
@@ -57,20 +57,17 @@ Otherwise, have a great day =^.^=
             background-color: var(--theme-hover);
         }
 
-        div.panel div.panel-body button.dropdown-toggle {
+        div.panel div.panel-body button {
             background: var(--searchbar-bg);
             color: var(--searchbar-fg);
             border-color: var(--theme-popup-border);
         }
 
-        div.panel div.panel-body button.dropdown-toggle:hover {
+        div.panel div.panel-body button:hover {
             box-shadow: 0 0 3px var(--searchbar-shadow-color);
         }
 
-        div.panel div.panel-body .open button.dropdown-toggle {
-            background: var(--searchbar-bg);
-            color: var(--searchbar-fg);
-            border-color: var(--theme-popup-border);
+        div.panel div.panel-body  button.open {
             filter: brightness(90%);
         }
 
@@ -96,7 +93,6 @@ Otherwise, have a great day =^.^=
         @media (min-width: 992px) {
             .search-control {
                 margin-top: 0;
-                float: right;
             }
         }
 
@@ -537,6 +533,14 @@ Otherwise, have a great day =^.^=
                             </span>
                         </div>
                     </div>
+                    <div class="btn-group">
+                        <button title="Collapse All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, false); $event.stopPropagation()">
+                            <span class="glyphicon glyphicon-collapse-up"></span>
+                        </button>
+                        <button title="Expand All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, true); $event.stopPropagation()">
+                            <span class="glyphicon glyphicon-collapse-down"></span>
+                        </button>
+                    </div>
                 </div>
             </div>
             <!-- The order of the filters should be from most likely to remove a lint to least likely to improve performance. -->
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index 921bb0376f6..661f80a6d34 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -469,6 +469,12 @@
                 $location.path(lint.id);
             };
 
+            $scope.toggleExpansion = function(lints, isExpanded) {
+                lints.forEach(lint => {
+                    $scope.open[lint.id] = isExpanded;
+                });
+            }
+
             $scope.copyToClipboard = function (lint) {
                 const clipboard = document.getElementById("clipboard-" + lint.id);
                 if (clipboard) {