Collapse/Expand section with paragraphs (#1508)

docs/_assets/add_paragraphs.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('details').forEach(details => {
+    const summary = details.querySelector('summary');
+
+    if (!summary) return;
+
+    let linkEl;
+
+    details.addEventListener('mouseenter', () => {
+      if (details.open) return;
+
+      const summaryText = summary.textContent.trim();
+      console.log(`${summaryText}`);
+      const hash = '#' + encodeURIComponent(summaryText);
+
+      if (linkEl) return;
+
+      linkEl = document.createElement('a');
+      linkEl.href = hash;
+      linkEl.textContent = '¶';
+      linkEl.title = 'Permanent link';
+      linkEl.className = 'hoverlink';
+
+      summary.appendChild(linkEl);
+    });
+
+    details.addEventListener('mouseleave', () => {
+      if (linkEl) {
+        linkEl.remove();
+        linkEl = null;
+      }
+    });
+  });
+});

docs/_assets/scroll_to_summary.js

@@ -0,0 +1,32 @@
+function scroll_to_summary() {
+  const hash = decodeURIComponent(window.location.hash.slice(1)).trim();
+  if (!hash) return;
+
+  const summaries = document.querySelectorAll('details > summary');
+
+  for (const summary of summaries) {
+    const text = summary.textContent.trim();
+
+    if (text.toLowerCase().includes(hash.toLowerCase())) {
+      const details = summary.closest('details');
+      if (details) {
+        details.open = true;
+
+        const yOffset = -60
+        const y = details.getBoundingClientRect().top + window.pageYOffset + yOffset;
+
+        window.scrollTo({ top: y, behavior: 'smooth' });
+
+        break;
+      }
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  scroll_to_summary();
+
+  window.addEventListener("hashchange", () => {
+    scroll_to_summary();
+  });
+});

docs/_assets/user.css

@@ -183,3 +183,13 @@ ol li::marker {
 .md-button--stretch {
 	width: 100%;
 }
+
+.hoverlink {
+	font-size: 1.0em;
+	margin-left: 8px;
+	text-decoration: none;
+}
+
+.hoverlink:hover {
+	text-decoration: none;
+}

mkdocs.yml

@@ -40,6 +40,10 @@ theme:
 extra_css:
     - _assets/user.css
 
+extra_javascript:
+  - _assets/add_paragraphs.js
+  - _assets/scroll_to_summary.js
+
 markdown_extensions:
     - admonition
     - def_list