element.
Sections collapsed by default (first one open). Resizing to
desktop unwraps everything back to flat structure.
============================================================ */
(function setupGuideCollapsibles() {
if (typeof document === "undefined") return;
function getContentColumns() {
/* React serializes inline gridColumn:1 + gridRow:"1 / 20" as grid-area shorthand */
return Array.from(
document.querySelectorAll('article [style*="grid-area: 1 / 1 / 20"]')
);
}
function isMobile() {
return window.matchMedia("(max-width: 900px)").matches;
}
function unwrap(col) {
Array.from(col.querySelectorAll(":scope > details.vm-c-section")).forEach((d) => {
const summary = d.querySelector(":scope > summary");
if (summary) {
const h2 = summary.querySelector("h2");
if (h2) d.parentNode.insertBefore(h2, d);
summary.remove();
}
while (d.firstChild) d.parentNode.insertBefore(d.firstChild, d);
d.remove();
});
}
function wrap(col) {
const children = Array.from(col.children);
const sections = [];
let current = null;
children.forEach((child) => {
const isAnchorSpan =
child.tagName === "SPAN" &&
child.id &&
child.nextElementSibling &&
child.nextElementSibling.tagName === "H2";
const isH2 = child.tagName === "H2";
if (isAnchorSpan) {
current = { anchor: child, h2: null, body: [] };
sections.push(current);
} else if (isH2) {
if (current && !current.h2) {
current.h2 = child;
} else {
current = { anchor: null, h2: child, body: [] };
sections.push(current);
}
} else if (current) {
current.body.push(child);
}
});
sections.forEach((section, idx) => {
if (!section.h2) return;
const details = document.createElement("details");
details.className = "vm-c-section";
if (idx === 0) details.setAttribute("open", "");
const summary = document.createElement("summary");
summary.appendChild(section.h2.cloneNode(true));
details.appendChild(summary);
section.body.forEach((node) => details.appendChild(node));
const placeBefore = section.anchor || section.h2;
placeBefore.parentNode.insertBefore(details, section.h2);
if (section.h2.parentNode) section.h2.parentNode.removeChild(section.h2);
});
}
function apply() {
const cols = getContentColumns();
if (!cols.length) return;
cols.forEach((col) => {
unwrap(col);
if (isMobile()) wrap(col);
});
}
function expandFromHash() {
const hash = window.location.hash;
if (!hash || hash.length < 2) return;
const target = document.getElementById(hash.slice(1));
if (!target) return;
let details = target.closest && target.closest("details.vm-c-section");
if (!details) {
let n = target.nextElementSibling;
while (n && n.tagName !== "DETAILS") n = n.nextElementSibling;
details = n;
}
if (details) details.open = true;
}
let initDone = false;
function init() {
if (initDone) return;
initDone = true;
apply();
expandFromHash();
let t;
window.addEventListener("resize", () => {
clearTimeout(t);
t = setTimeout(apply, 200);
});
document.addEventListener("click", (e) => {
const a = e.target.closest && e.target.closest('a[href^="#"]');
if (!a) return;
const id = a.getAttribute("href").slice(1);
if (!id) return;
setTimeout(expandFromHash, 30);
});
window.addEventListener("hashchange", expandFromHash);
}
if (getContentColumns().length && document.querySelector("article h2")) {
init();
} else {
const obs = new MutationObserver(() => {
if (getContentColumns().length && document.querySelector("article h2")) {
obs.disconnect();
init();
}
});
obs.observe(document.body, { childList: true, subtree: true });
setTimeout(() => obs.disconnect(), 8000);
}
})();