Feat/toggle checklist groups

src/checklist.njk

@@ -84,6 +84,8 @@ templateClass: template-checklist
 
 	<hr class="c-divider" />
 
+	<button id="toggle-all">Toggle All</button>
+
 	{% for category, content in checklists %}
 	{# 6 May 2021: We don't publish our guidelines about SVGs #}
 	{% if category !== 'svg' %}
@@ -95,6 +97,7 @@ templateClass: template-checklist
 	<p class="c-preface">
 		{{ content.preface | safe }}
 	</p>
+	<button class="toggle-category">Toggle {{ category }}</button>
 	<div class="c-card__wrapper">
 		{% set tasks = content.tasks %}
 		{% for task in tasks %}

src/js/checklist.js

@@ -4,14 +4,14 @@
  * by a DOM selector.
  * @see processChecklistClick
  */
- if (!Element.prototype.matches) {
+if (!Element.prototype.matches) {
 	Element.prototype.matches = Element.prototype.msMatchesSelector;
 }
 
 /**
  * If someone opens the checklist page using a checklist item's "Share link" (ex: a11yproject.com/checklist/#validate-your-html) the item with the corresponding id will scroll into view. Then, if JS is enabled, this function will open its associated <details> element
  */
- function openLinkedCheckListItem() {
+function openLinkedCheckListItem() {
 	var hash = window.location.hash.substr(1);
 	var checklistItem =
 		hash.length > 0 &&
@@ -23,15 +23,15 @@
 }
 // Store checklist status ---------------------------------------------------
 function storeChecklistItem(checkboxId) {
-	localStorage.setItem(checkboxId, 'checked');
+	localStorage.setItem(checkboxId, "checked");
 }
 
 function removeChecklistItem(checkboxId) {
 	localStorage.removeItem(checkboxId);
 }
 
 function processChecklistClick(checkboxSelector) {
-	document.addEventListener("change", function(event) {
+	document.addEventListener("change", function (event) {
 		var target = event.target;
 
 		if (!target.matches(checkboxSelector)) {
@@ -42,7 +42,7 @@ function processChecklistClick(checkboxSelector) {
 			storeChecklistItem(target.id);
 		} else {
 			removeChecklistItem(target.id);
-	}
+		}
 	});
 }
 
@@ -58,10 +58,45 @@ function populateChecklistFromLocalStorage(checkboxSelector) {
 
 function processChecklist() {
 	var checkboxSelector = '.c-checklist__checkbox input[type="checkbox"]';
-
 	populateChecklistFromLocalStorage(checkboxSelector);
 	processChecklistClick(checkboxSelector);
 }
 
 openLinkedCheckListItem();
 processChecklist();
+
+function registerToggleButton(buttonEl, parentEl) {
+	if (buttonEl && parentEl) {
+		var details = parentEl.querySelectorAll("details");
+		buttonEl.addEventListener("click", function handleToggleButtonClick(event) {
+			var target = event.target;
+			if (target.hasAttribute("data-open") === true) {
+				target.removeAttribute("data-open");
+			} else {
+				target.setAttribute("data-open", true);
+			}
+			details.forEach(function (item) {
+				if (target.hasAttribute("data-open") === true) {
+					item.setAttribute("open", true);
+				} else {
+					item.removeAttribute("open");
+				}
+			});
+		});
+	}
+}
+
+function renderToggle() {
+	var toggleAllButton = document.querySelector("#toggle-all");
+	registerToggleButton(toggleAllButton, document);
+
+	var toggleCategoryButtons = document.querySelectorAll(
+		"[data-toggle-category]"
+	);
+	toggleCategoryButtons.forEach(function (button) {
+		var parentSection = button.closest("section");
+		registerToggleButton(button, parentSection);
+	});
+}
+
+renderToggle();