49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
|
function collapse(panel) {
|
|
if (reduce) { panel.hidden = true; return; }
|
|
var h = panel.scrollHeight;
|
|
panel.style.height = h + "px";
|
|
// force reflow so the transition runs
|
|
panel.offsetHeight; // eslint-disable-line no-unused-expressions
|
|
panel.style.height = "0px";
|
|
panel.addEventListener("transitionend", function done() {
|
|
panel.hidden = true;
|
|
panel.style.height = "";
|
|
panel.removeEventListener("transitionend", done);
|
|
});
|
|
}
|
|
|
|
function expand(panel) {
|
|
panel.hidden = false;
|
|
if (reduce) return;
|
|
var h = panel.scrollHeight;
|
|
panel.style.height = "0px";
|
|
panel.offsetHeight; // reflow
|
|
panel.style.height = h + "px";
|
|
panel.addEventListener("transitionend", function done() {
|
|
panel.style.height = "";
|
|
panel.removeEventListener("transitionend", done);
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll("[data-topic]").forEach(function (item) {
|
|
var head = item.querySelector(".topic__head");
|
|
var panel = item.querySelector(".topic__panel");
|
|
if (!head || !panel) return;
|
|
|
|
// enable CSS height transition
|
|
panel.style.transition = "height .42s cubic-bezier(.22,.61,.36,1)";
|
|
panel.style.overflow = "hidden";
|
|
|
|
head.addEventListener("click", function () {
|
|
var open = item.classList.toggle("is-open");
|
|
head.setAttribute("aria-expanded", open ? "true" : "false");
|
|
if (open) { expand(panel); } else { collapse(panel); }
|
|
});
|
|
});
|
|
})();
|