feat: Add support for collapsing page content under headings (resolves #1671)

src/_includes/layouts/base.njk

@@ -14,6 +14,10 @@
     <script src="/assets/scripts/lite-yt-embed.js"></script>
     <link rel="preload" href="/lib/infusion/dist/infusion-uio.js" as="script">
 
+    {%  if expandableHeading %}
+    <script src="/assets/scripts/expandable-heading.js"></script>
+    {% endif %}
+
     <!-- CSS files for UI Options-->
     <link rel="stylesheet" type="text/css" href="/lib/infusion/src/framework/core/css/fluid.css"/>
     <link rel="stylesheet" type="text/css" href="/lib/infusion/src/framework/preferences/css/Enactors.css"/>

src/admin/config.yml

@@ -57,6 +57,11 @@ collections:
       - label: Body
         name: body
         widget: markdown
+      - label: Expandable H2
+        name: expandableHeading
+        widget: boolean
+        default: false
+        hint: Make every H2s on the page hide/show their content.
   - name: initiatives
     label: Initiatives
     label_singular: Initiative
@@ -102,6 +107,11 @@ collections:
       - label: Tags
         name: tags
         widget: list
+      - label: Expandable H2
+        name: expandableHeading
+        widget: boolean
+        default: false
+        hint: Make every H2s on the page hide/show their content.
   - name: events
     label: Events
     label_singular: Event

src/assets/scripts/expandable-heading.js

@@ -0,0 +1,44 @@
+const renderExpandableHeaddingIcon = (isExpanded) => {
+	return (isExpanded ?
+		"<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" transform=\"rotate(90)\" viewBox=\"0 0 330 330\"><path d=\"m250.606 154.389-150-149.996c-5.857-5.858-15.355-5.858-21.213.001-5.857 5.858-5.857 15.355.001 21.213l139.393 139.39L79.393 304.394c-5.857 5.858-5.857 15.355.001 21.213C82.322 328.536 86.161 330 90 330s7.678-1.464 10.607-4.394l149.999-150.004a14.996 14.996 0 0 0 0-21.213z\"/></svg>" :
+		"<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" viewBox=\"0 0 270 330\"><path d=\"m250.606 154.389-150-149.996c-5.857-5.858-15.355-5.858-21.213.001-5.857 5.858-5.857 15.355.001 21.213l139.393 139.39L79.393 304.394c-5.857 5.858-5.857 15.355.001 21.213C82.322 328.536 86.161 330 90 330s7.678-1.464 10.607-4.394l149.999-150.004a14.996 14.996 0 0 0 0-21.213z\"/></svg>"
+	);
+};
+
+const displayHeadingContent = (content, expanded) => {
+	while (content && !content.nodeName.startsWith("H")) {
+		if (!expanded) {
+			content.setAttribute("hidden", "true");
+		} else {
+			content.removeAttribute("hidden");
+		}
+		content = content.nextElementSibling;
+	}
+};
+
+window.addEventListener("load", () => {
+	document.querySelectorAll("main article h2:not(#tags)").forEach(heading => {
+		heading.classList.add("expandable-heading");
+		heading.innerHTML =
+        `
+            <button class="expandable-heading__toggle"
+                aria-expanded="false">
+                <div class="expandable-heading__icon">
+                ${renderExpandableHeaddingIcon(false)}
+                </div>
+                ${heading.textContent}
+            </button>
+        `;
+		displayHeadingContent(heading.nextElementSibling, false);
+	});
+
+	document.querySelectorAll(".expandable-heading__toggle").forEach((expandableHeading) => {
+		expandableHeading.addEventListener("click", (e) => {
+			const expanded = e.currentTarget.getAttribute("aria-expanded") === "true";
+			e.currentTarget.setAttribute("aria-expanded", !expanded);
+			e.currentTarget.querySelector(".expandable-heading__icon").innerHTML =
+                renderExpandableHeaddingIcon(!expanded);
+			displayHeadingContent(e.currentTarget.parentNode.nextElementSibling, !expanded);
+		});
+	});
+});

src/assets/styles/base/_base.scss

@@ -105,7 +105,8 @@ button:not(
 .fl-prefsEditor-showHide,
 .fl-prefsEditor-reset,
 .fl-switchUI-control,
-.lty-playbtn) {
+.lty-playbtn,
+.expandable-heading__toggle) {
 	background-color: $green-light;
 	block-size: rem(54);
 	border: 0;
@@ -127,7 +128,8 @@ button:not(
 .fl-prefsEditor-reset,
 .fl-switchUI-control,
 .lty-playbtn,
-.expander__toggle)::before {
+.expander__toggle,
+.expandable-heading__toggle)::before {
 	block-size: rem(54);
 	border-radius: rem(26);
 	box-shadow: 0 0 0 rem(2) $blue-alt-light inset;

src/assets/styles/components/_components.scss

@@ -15,3 +15,4 @@
 @import "resources";
 @import "search-container";
 @import "tile-item";
+@import "expandable-heading";

src/assets/styles/components/_expandable-heading.scss

@@ -0,0 +1,23 @@
+.expandable-heading {
+	inline-size: 100%;
+
+	&:has(button:focus),
+	&:hover {
+		background-color: #fadc90;
+		color: $green-dark;
+		outline: 0;
+	}
+}
+
+.expandable-heading__toggle {
+	align-items: center;
+	background-color: unset;
+	border: none;
+	display: flex;
+	gap: rem(12);
+	inline-size: 100%;
+
+	svg {
+		block-size: rem(24);
+	}
+}

src/collections/initiatives/a-clusive-success-story.md

@@ -11,6 +11,7 @@ tags:
   - Disability
   - Education
   - CISL
+expandableHeading: true
 ---
 ![Clusive logo](https://www.cast.org/binaries/content/gallery/castm/impact/clusive-story-16x9.jpg/clusive-story-16x9.jpg/aem%3Amedium)