diff --git a/aio/src/styles/1-layouts/_api-pages.scss b/aio/src/styles/1-layouts/_api-pages.scss
index a2d7809585..8088a71aeb 100644
--- a/aio/src/styles/1-layouts/_api-pages.scss
+++ b/aio/src/styles/1-layouts/_api-pages.scss
@@ -161,13 +161,35 @@
 
       summary {
         height: inherit;
-        padding: 0 8px 8px;
+        padding: 0 0 8px;
 
         h4 {
           margin: 0;
         }
+
+        .show-all {
+          display: initial;
+        }
+        .collapse-all {
+          display: none;
+        }
       }
-  }
+
+      &[open] > summary {
+        .show-all {
+          display: none;
+        }
+        .collapse-all {
+          display: initial;
+        }
+      }
+    }
+
+    details.overload {
+      box-shadow: none;
+      margin: 0;
+    }
+
 
     .from-constructor, .read-only-property {
       font-size: 12px;
@@ -248,7 +270,11 @@ details {
     padding: 16px 24px;
   }
 
-  &[open] > i.material-icons {
-    @include rotate(180deg); // Rotate the icon
+  // Rotate the icon
+  summary i.material-icons.expand {
+    @include rotate(0deg);
+  }
+  &[open] > summary i.material-icons.expand {
+    @include rotate(180deg);
   }
 }
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
index c4d991528f..0a15539262 100644
--- a/aio/tools/transforms/templates/api/lib/memberHelpers.html
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -124,7 +124,11 @@
           <summary>
             <div class="icon-action-header">
                 <h4 class="no-anchor">Overloads</h4>
-                <a>Show All <i class="material-icons">expand_more</i></a>
+                <a>
+                  <span class="show-all">Show All</span>
+                  <span class="collapse-all">Collapse All</span>
+                  <i class="material-icons expand">expand_more</i>
+                </a>
               </div>
           </summary>
           <div class="detail-contents">
@@ -133,14 +137,17 @@
               <hr class="hr-margin fullwidth">
             {% endif %}
             {% for overload in method.overloads %}
-              <div>
-                <h5 class="icon-action-header no-anchor">
-                  <span>Overload #{$ loop.index $} of {$ method.overloads.length $}</span>
-                  <i class="material-icons">expand_more</i></h5>
+              <details class="overload"{% if loop.first %} open{% endif %}>
+                <summary>
+                  <div class="icon-action-header">
+                    <h5 class="no-anchor">Overload #{$ loop.index $} of {$ method.overloads.length $}</h5>
+                    <a><i class="material-icons expand">expand_more</i></a>
+                  </div>
+                </summary>
                 {$ renderOverloadInfo(overload, cssClass + '-overload', method) $}
                 {% if not loop.last %}<hr class="hr-margin">{% endif %}
+              </details>
               {% endfor %}
-              </div>
           </div>
         </details>
       </td>