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

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

@@ -15844,37 +15844,35 @@ 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; border-bottom: 1px solid var(--border-color, #dee2e6);
border-bottom: 1px solid var(--border-color, #dee2e6); border-radius: 0;
border-radius: 0; }
}
.container-sidebar-left.accordion .card-header, .container-sidebar-left.accordion .card-header,
.container-sidebar-right.accordion .card-header { .container-sidebar-right.accordion .card-header {
padding: 0; padding: 0;
background: none; background: none;
border: none; border: none;
} }
.container-sidebar-left.accordion .accordion-button, .container-sidebar-left.accordion .accordion-button,
.container-sidebar-right.accordion .accordion-button { .container-sidebar-right.accordion .accordion-button {
padding: .75rem 1rem; padding: .75rem 1rem;
font-weight: 600; font-weight: 600;
font-size: .95rem; font-size: .95rem;
background: var(--bs-body-bg, #fff); background: var(--bs-body-bg, #fff);
color: var(--body-font-color, #444); color: var(--body-font-color, #444);
} }
.container-sidebar-left.accordion .accordion-button:not(.collapsed), .container-sidebar-left.accordion .accordion-button:not(.collapsed),
.container-sidebar-right.accordion .accordion-button:not(.collapsed) { .container-sidebar-right.accordion .accordion-button:not(.collapsed) {
background: var(--bs-body-bg, #fff); background: var(--bs-body-bg, #fff);
color: var(--link-color, #3565e5); color: var(--link-color, #3565e5);
box-shadow: none; box-shadow: none;
}
} }
.container-main-top { .container-main-top {

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

@@ -497,87 +497,46 @@
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
sidebars.forEach(function (sidebar, si) {
var accId = "sidebarAcc-" + si;
sidebar.setAttribute("id", accId);
sidebar.classList.add("accordion");
function apply() {
var isMobile = win.innerWidth < BREAKPOINT; var isMobile = win.innerWidth < BREAKPOINT;
var cards = sidebar.querySelectorAll(":scope > .card");
if (isMobile && !accordionised) { cards.forEach(function (card, ci) {
sidebars.forEach(function (sidebar, si) { var collapseId = accId + "-c" + ci;
var accId = "sidebarAcc-" + si; card.classList.add("accordion-item");
sidebar.setAttribute("id", accId);
sidebar.classList.add("accordion");
var cards = sidebar.querySelectorAll(":scope > .card"); var header = card.querySelector(".card-header");
cards.forEach(function (card, ci) { var body = card.querySelector(".card-body");
var collapseId = accId + "-c" + ci; if (!header || !body) return;
card.classList.add("accordion-item");
var header = card.querySelector(".card-header"); // Turn header into accordion button
var body = card.querySelector(".card-body"); header.classList.add("accordion-header");
if (!header || !body) return; var btn = doc.createElement("button");
btn.className = isMobile ? "accordion-button collapsed" : "accordion-button";
btn.type = "button";
btn.setAttribute("data-bs-toggle", "collapse");
btn.setAttribute("data-bs-target", "#" + collapseId);
btn.setAttribute("aria-expanded", isMobile ? "false" : "true");
btn.setAttribute("aria-controls", collapseId);
btn.textContent = header.textContent;
header.textContent = "";
header.appendChild(btn);
// Turn header into accordion button // Wrap body in collapse
header.classList.add("accordion-header"); var wrapper = doc.createElement("div");
var btn = doc.createElement("button"); wrapper.id = collapseId;
btn.className = "accordion-button collapsed"; wrapper.className = isMobile ? "accordion-collapse collapse" : "accordion-collapse collapse show";
btn.type = "button"; wrapper.setAttribute("data-bs-parent", "#" + accId);
btn.setAttribute("data-bs-toggle", "collapse"); card.insertBefore(wrapper, body);
btn.setAttribute("data-bs-target", "#" + collapseId); wrapper.appendChild(body);
btn.setAttribute("aria-expanded", "false"); body.classList.add("accordion-body");
btn.setAttribute("aria-controls", collapseId); });
btn.textContent = header.textContent; });
header.textContent = "";
header.appendChild(btn);
header.setAttribute("data-moko-original-text", btn.textContent);
// Wrap body in collapse
var wrapper = doc.createElement("div");
wrapper.id = collapseId;
wrapper.className = "accordion-collapse collapse";
wrapper.setAttribute("data-bs-parent", "#" + accId);
card.insertBefore(wrapper, body);
wrapper.appendChild(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);
} }
/** /**