MokoConsulting/MokoCassiopeia
1
1
Fork 0
Code Issues 2 Pull Requests Actions Packages Releases 1 Activity

Sidebar accordions at all breakpoints, open on desktop, closed on mobile

Browse Source 
Accordion structure now applies at all screen sizes. On desktop
(>= 992px) all panels start expanded (show class + aria-expanded
true). On mobile (< 992px) all panels start collapsed. CSS no
longer scoped to mobile media query.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-04 16:32:57 -05:00
parent 4e54231b16
commit a2a31f528b
2 changed files with 60 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/media/css/template.css
View File

@@ -15844,8 +15844,7 @@ body:not(.has-sidebar-right) .site-grid .container-component {
grid-area: side-r; grid-area: side-r;
} }
/* Sidebar accordion on mobile */ /* Sidebar accordion */
@media (max-width: 991.98px) {
.container-sidebar-left.accordion .card, .container-sidebar-left.accordion .card,
.container-sidebar-right.accordion .card { .container-sidebar-right.accordion .card {
border: none; border: none;
@@ -15875,7 +15874,6 @@ body:not(.has-sidebar-right) .site-grid .container-component {
color: var(--link-color, #3565e5); color: var(--link-color, #3565e5);
box-shadow: none; box-shadow: none;
} }
}
.container-main-top { .container-main-top {
grid-area: main-t; grid-area: main-t;

53
src/media/js/template.js
View File

@@ -497,18 +497,15 @@
var sidebars = doc.querySelectorAll(".container-sidebar-left, .container-sidebar-right"); var sidebars = doc.querySelectorAll(".container-sidebar-left, .container-sidebar-right");
if (!sidebars.length) return; if (!sidebars.length) return;
var accordionised = false; // Build accordion structure once — works at all breakpoints
function apply() {
var isMobile = win.innerWidth < BREAKPOINT;
if (isMobile && !accordionised) {
sidebars.forEach(function (sidebar, si) { sidebars.forEach(function (sidebar, si) {
var accId = "sidebarAcc-" + si; var accId = "sidebarAcc-" + si;
sidebar.setAttribute("id", accId); sidebar.setAttribute("id", accId);
sidebar.classList.add("accordion"); sidebar.classList.add("accordion");
var isMobile = win.innerWidth < BREAKPOINT;
var cards = sidebar.querySelectorAll(":scope > .card"); var cards = sidebar.querySelectorAll(":scope > .card");
cards.forEach(function (card, ci) { cards.forEach(function (card, ci) {
var collapseId = accId + "-c" + ci; var collapseId = accId + "-c" + ci;
card.classList.add("accordion-item"); card.classList.add("accordion-item");
@@ -520,64 +517,26 @@
// Turn header into accordion button // Turn header into accordion button
header.classList.add("accordion-header"); header.classList.add("accordion-header");
var btn = doc.createElement("button"); var btn = doc.createElement("button");
btn.className = "accordion-button collapsed"; btn.className = isMobile ? "accordion-button collapsed" : "accordion-button";
btn.type = "button"; btn.type = "button";
btn.setAttribute("data-bs-toggle", "collapse"); btn.setAttribute("data-bs-toggle", "collapse");
btn.setAttribute("data-bs-target", "#" + collapseId); btn.setAttribute("data-bs-target", "#" + collapseId);
btn.setAttribute("aria-expanded", "false"); btn.setAttribute("aria-expanded", isMobile ? "false" : "true");
btn.setAttribute("aria-controls", collapseId); btn.setAttribute("aria-controls", collapseId);
btn.textContent = header.textContent; btn.textContent = header.textContent;
header.textContent = ""; header.textContent = "";
header.appendChild(btn); header.appendChild(btn);
header.setAttribute("data-moko-original-text", btn.textContent);
// Wrap body in collapse // Wrap body in collapse
var wrapper = doc.createElement("div"); var wrapper = doc.createElement("div");
wrapper.id = collapseId; wrapper.id = collapseId;
wrapper.className = "accordion-collapse collapse"; wrapper.className = isMobile ? "accordion-collapse collapse" : "accordion-collapse collapse show";
wrapper.setAttribute("data-bs-parent", "#" + accId); wrapper.setAttribute("data-bs-parent", "#" + accId);
card.insertBefore(wrapper, body); card.insertBefore(wrapper, body);
wrapper.appendChild(body); wrapper.appendChild(body);
body.classList.add("accordion-body"); body.classList.add("accordion-body");
}); });
}); });
accordionised = true;
} else if (!isMobile && accordionised) {
// Revert to plain cards
sidebars.forEach(function (sidebar) {
sidebar.classList.remove("accordion");
sidebar.removeAttribute("id");
var cards = sidebar.querySelectorAll(":scope > .card");
cards.forEach(function (card) {
card.classList.remove("accordion-item");
var header = card.querySelector(".card-header");
var btn = header ? header.querySelector(".accordion-button") : null;
if (header && btn) {
var text = header.getAttribute("data-moko-original-text") || btn.textContent;
header.removeAttribute("data-moko-original-text");
header.classList.remove("accordion-header");
header.textContent = text;
}
var wrapper = card.querySelector(".accordion-collapse");
if (wrapper) {
var body = wrapper.querySelector(".card-body");
if (body) {
body.classList.remove("accordion-body");
card.appendChild(body);
}
wrapper.parentNode.removeChild(wrapper);
}
});
});
accordionised = false;
}
}
apply();
win.addEventListener("resize", apply);
} }
/** /**