Frontend Features and refactor

js/collapsible.js

@@ -1,10 +1,28 @@
 var coll = document.getElementsByClassName("collapsible");
 var i;
 
+function setOpen(button, open) {
+  var content = button.nextElementSibling;
+  button.classList.toggle("active", open);
+  button.setAttribute("aria-expanded", open ? "true" : "false");
+  if (!content) {
+    return;
+  }
+  if (!open) {
+    content.style.display = "none";
+  } else if (content.classList.contains('chapter-grid')) {
+    content.style.display = "grid";
+  } else {
+    content.style.display = "block";
+  }
+}
+
 for (i = 0; i < coll.length; i++) {
+  coll[i].setAttribute("aria-expanded", "false");
   coll[i].addEventListener("click", function() {
     var content = this.nextElementSibling;
-    var isCurrentlyOpen = content.style.display === "block" || content.style.display === "grid";
+    // computed style, so content hidden by a stylesheet counts as closed
+    var isCurrentlyOpen = content && getComputedStyle(content).display !== "none";
 
     // If this collapsible has a parent with book-grid class, close all siblings in that grid
     var parentGrid = this.closest('.book-grid');
@@ -12,25 +30,11 @@ for (i = 0; i < coll.length; i++) {
       var siblings = parentGrid.querySelectorAll('.collapsible');
       for (var j = 0; j < siblings.length; j++) {
         if (siblings[j] !== this) {
-          siblings[j].classList.remove("active");
-          var siblingContent = siblings[j].nextElementSibling;
-          if (siblingContent) {
-            siblingContent.style.display = "none";
-          }
+          setOpen(siblings[j], false);
         }
       }
     }
 
-    // Toggle current element
-    this.classList.toggle("active");
-    if (isCurrentlyOpen) {
-      content.style.display = "none";
-    } else {
-      if (content.classList.contains('chapter-grid')) {
-        content.style.display = "grid";
-      } else {
-        content.style.display = "block";
-      }
-    }
+    setOpen(this, !isCurrentlyOpen);
   });
 }