Collapse sections

Author: rojvv

_config.ts

@@ -524,7 +524,24 @@ site.helper("walkthrough", (track: string) => {
     return `  <li><a href="${escapeHtml(page.src.path)}">${escapeHtml(title)}</a>${sections}\n  </li>`;
   });
 
-  return `<ol class="walkthrough-list" aria-label="${label}">\n${items.join("\n")}\n</ol>`;
+  const visibleItems = items.slice(0, 10);
+  const remainingItems = items.slice(10);
+  if (!remainingItems.length) {
+    return `<ol class="walkthrough-list" aria-label="${label}">\n${visibleItems.join("\n")}\n</ol>`;
+  }
+
+  return `<div class="walkthrough-group" data-walkthrough-collapsed>
+  <ol class="walkthrough-list" aria-label="${label}">\n${visibleItems.join("\n")}\n  </ol>
+  <button class="walkthrough-more" type="button" aria-expanded="false">
+    <span class="walkthrough-more-collapsed">Show More</span>
+    <span class="walkthrough-more-expanded">Show Less</span>
+  </button>
+  <div class="walkthrough-remainder">
+    <div class="walkthrough-remainder-inner">
+      <ol class="walkthrough-list walkthrough-list-continuation" start="11" aria-label="${label}, continued">\n${remainingItems.join("\n")}\n      </ol>
+    </div>
+  </div>
+</div>`;
 }, { type: "filter" });
 
 site.data("layout", "layout.tsx");

src/_includes/style/walkthrough.scss

@@ -52,6 +52,51 @@ ol.walkthrough-list {
   }
 }
 
+.walkthrough-group {
+  position: relative;
+
+  > .walkthrough-list {
+    margin-bottom: 0;
+  }
+}
+
+.walkthrough-more {
+  display: none;
+}
+
+.walkthrough-more-expanded {
+  display: none;
+}
+
+.walkthrough-remainder {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transform: translateY(-0.5rem);
+  transition:
+    grid-template-rows 560ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 240ms ease,
+    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  > .walkthrough-remainder-inner {
+    min-height: 0;
+    overflow: hidden;
+    margin-left: -1.5rem;
+    padding-left: 1.5rem;
+
+    > .walkthrough-list {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.walkthrough-list-continuation > li {
+  opacity: 0;
+  transform: translateY(-0.3rem);
+  transition: opacity 220ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
 .index-subsections > ul {
   display: grid;
   gap: 0.15rem;
@@ -166,12 +211,78 @@ ol.walkthrough-list {
 }
 
 @media (hover: hover) and (pointer: fine) {
+  .walkthrough-group:hover,
+  .walkthrough-group:focus-within {
+    > .walkthrough-remainder {
+      grid-template-rows: 1fr;
+      opacity: 1;
+      transform: none;
+
+      > .walkthrough-remainder-inner > .walkthrough-list {
+        margin-bottom: 1rem;
+      }
+    }
+
+    .walkthrough-list-continuation > li {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
   .index-subsection-toggle {
     display: none;
   }
 }
 
+@media (hover: none), (pointer: coarse) {
+  .walkthrough-more {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    margin: 0.2rem 0 0.2rem 1.15rem;
+    padding: 0.2rem 0.45rem;
+    border: 0;
+    border-radius: 0;
+    background: var(--dbt);
+    color: var(--kr);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.75rem;
+    touch-action: manipulation;
+  }
+
+  .walkthrough-group.is-expanded > .walkthrough-more {
+    > .walkthrough-more-collapsed {
+      display: none;
+    }
+
+    > .walkthrough-more-expanded {
+      display: inline;
+    }
+  }
+
+  .walkthrough-group.is-expanded > .walkthrough-remainder {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transform: none;
+
+    > .walkthrough-remainder-inner > .walkthrough-list {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .walkthrough-group.is-expanded .walkthrough-list-continuation > li {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
+  .walkthrough-remainder,
+  .walkthrough-list-continuation > li {
+    transition-duration: 0.01ms !important;
+  }
+
   .index-subsections > ul > li {
     transition-delay: 0ms !important;
   }

src/static/script.js

@@ -331,6 +331,18 @@ function initIndexSubsections() {
   hoverQuery.addEventListener("change", syncInputMode);
 }
 
+function initWalkthroughGroups() {
+  for (const group of document.querySelectorAll("[data-walkthrough-collapsed]")) {
+    const button = group.querySelector(":scope > .walkthrough-more");
+    if (!(button instanceof HTMLButtonElement)) continue;
+
+    button.addEventListener("click", () => {
+      const expanded = group.classList.toggle("is-expanded");
+      button.setAttribute("aria-expanded", String(expanded));
+    });
+  }
+}
+
 function initToc() {
   const toc = document.querySelector(".toc");
   const mobileToggle = toc?.querySelector(".toc-mobile-toggle");
@@ -718,6 +730,7 @@ function initToc() {
   if (!activateHashEntry()) updateActive();
 }
 
+initWalkthroughGroups();
 initIndexSubsections();
 initReferenceFilter();
 initToc();