diff --git a/website/templates/category.html b/website/templates/category.html
index 4399505c..c1a49186 100644
--- a/website/templates/category.html
+++ b/website/templates/category.html
@@ -56,18 +56,26 @@
 
     {% if group_categories %}
     <nav class="hero-category-nav" aria-labelledby="hero-category-heading">
-      <div class="hero-category-meta">
-        <h2 id="hero-category-heading">Browse by category</h2>
-      </div>
-      <ul class="hero-category-links">
-        {% for sub in group_categories %}
-        <li>
-          <a class="hero-category-link" href="{{ category_urls[sub.name] }}"
-            >{{ sub.name }}</a
-          >
-        </li>
-        {% endfor %}
-      </ul>
+      <details class="hero-category-details" open>
+        <summary class="hero-category-meta">
+          <h2 id="hero-category-heading">Browse by category</h2>
+        </summary>
+        <ul class="hero-category-links">
+          {% for sub in group_categories %}
+          <li>
+            <a class="hero-category-link" href="{{ category_urls[sub.name] }}"
+              >{{ sub.name }}</a
+            >
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+      <script>
+        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
+        if (matchMedia("(max-width: 680px)").matches) {
+          document.currentScript.previousElementSibling.open = false;
+        }
+      </script>
     </nav>
     {% endif %}
   </div>