logic and styling to expand and open checklist sections

src/checklist.njk

@@ -83,6 +83,12 @@ templateClass: template-checklist
 	</div>
 
 	<hr class="c-divider" />
+
+	<button 
+		type="button" 
+		id="toggle-all" 
+		class="c-checklist-toggle c-checklist-toggle--global" 
+		aria-expanded="false">Open All</button>
 
 	{% for category, content in checklists %}
 	{# 6 May 2021: We don't publish our guidelines about SVGs #}
@@ -95,6 +101,12 @@ templateClass: template-checklist
 	<p class="c-preface">
 		{{ content.preface | safe }}
 	</p>
+
+	<button 
+		type="button" 
+		class="c-checklist-toggle c-checklist-toggle--category toggle-category" 
+		aria-expanded="false">Open {{ category }}</button>
+
 	<div class="c-card__wrapper">
 		{% set tasks = content.tasks %}
 		{% for task in tasks %}

src/css/components/_c-checklist.scss

@@ -290,3 +290,37 @@ margin-left: 1rem;
 		padding-left: map-get($_checklist-inset, large);
 	}
 }
+.c-checklist-toggle {
+    @include var(background-color, checklist-accent);
+    @include var(color, body-background);
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-family: $font-family-secondary;
+    margin-bottom: 1rem;
+    padding: 0.5rem 1rem;
+    transition: opacity $animation-duration-shorter $animation-easing-character;
+
+    &:hover {
+        opacity: 0.9;
+    }
+
+    &:focus {
+        outline: $border-thin solid;
+        @include var(outline-color, checklist-focus-text);
+        outline-offset: 0.125rem;
+    }
+
+    // User Queries
+    @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+}
+
+.c-checklist-toggle--global {
+    margin-bottom: 2rem;
+}
+
+.c-checklist-toggle--category {
+    margin-bottom: 1.5rem;
+}

src/js/checklist.js

@@ -62,6 +62,66 @@ function processChecklist() {
 	populateChecklistFromLocalStorage(checkboxSelector);
 	processChecklistClick(checkboxSelector);
 }
+/**
+ * Toggles all details elements within a container to a specific state
+ * @param {HTMLElement} container - The container element
+ * @param {boolean} shouldExpand - Whether to expand or collapse
+ */
+function toggleDetails(container, shouldExpand) {
+    var details = container.querySelectorAll('details');
+    var length = details.length;
+    for (var i = 0; i < length; ++i) {
+        if (shouldExpand) {
+            details[i].setAttribute('open', '');
+        } else {
+            details[i].removeAttribute('open');
+        }
+    }
+}
+
+/**
+ * Sets up toggle functionality for category and global controls
+ */
+function setupToggles() {
+    var mainContent = document.querySelector('[data-content]');
+    var toggleAllBtn = document.getElementById('toggle-all');
+    var allExpanded = false;
+
+    // Setup global toggle
+    if (toggleAllBtn) {
+        toggleAllBtn.setAttribute('aria-expanded', 'false');
+
+        toggleAllBtn.addEventListener('click', function() {
+            allExpanded = !allExpanded;
+            toggleDetails(mainContent, allExpanded);
+            toggleAllBtn.setAttribute('aria-expanded', allExpanded.toString());
+            toggleAllBtn.textContent = allExpanded ? 'Close All' : 'Open All';
+        });
+    }
+
+    // Setup category toggles
+    var categoryToggles = document.querySelectorAll('.toggle-category');
+    var length = categoryToggles.length;
+    for (var i = 0; i < length; ++i) {
+        var toggle = categoryToggles[i];
+        toggle.setAttribute('aria-expanded', 'false');
+
+        toggle.addEventListener('click', function(event) {
+            var btn = event.currentTarget;
+            var categorySection = btn.closest('[data-checklist-category]');
+            var categoryName = categorySection.getAttribute('data-checklist-category');
+            var isExpanded = btn.getAttribute('aria-expanded') === 'true';
+            var newExpandedState = !isExpanded;
+
+            toggleDetails(categorySection, newExpandedState);
+            btn.setAttribute('aria-expanded', newExpandedState.toString());
+            btn.textContent = newExpandedState ? 
+                'Close ' + categoryName : 
+                'Open ' + categoryName;
+        });
+    }
+}
 
 openLinkedCheckListItem();
 processChecklist();
+setupToggles();