fix Expand and Close toggling

sarahs · sarahs · commit e6629a6416ad · 2020-11-17T11:35:19.000-05:00
diff --git a/javascripts/dev-toc.js b/javascripts/dev-toc.js
@@ -5,19 +5,35 @@ export default function devToc () {
   const expandButton = document.querySelector('.js-expand')
   if (!expandButton) return
 
-  expandButton.addEventListener('click', () => {
-    // on click, toggle the button text
-    expandButton.textContent === expandText
-      ? expandButton.textContent = closeText
-      : expandButton.textContent = expandText
+  const detailsElements = document.querySelectorAll('details')
 
+  expandButton.addEventListener('click', () => {
     // on click, toggle all the details elements open or closed
-    const detailsElements = document.querySelectorAll('details')
+    const anyDetailsOpen = Array.from(detailsElements).find(details => details.open)
 
     for (const detailsElement of detailsElements) {
-      detailsElement.open
+      anyDetailsOpen
         ? detailsElement.removeAttribute('open')
         : detailsElement.open = true
     }
+
+    // toggle the button text on click
+    anyDetailsOpen
+      ? expandButton.textContent = expandText
+      : expandButton.textContent = closeText
   })
+
+  // also toggle the button text on clicking any of the details elements
+  for (const detailsElement of detailsElements) {
+    detailsElement.addEventListener('click', () => {
+      expandButton.textContent = closeText
+
+      // we can only get an accurate count of the open details elements if we wait a fraction after click
+      setTimeout(() => {
+        if (!Array.from(detailsElements).find(details => details.open)) {
+          expandButton.textContent = expandText
+        }
+      }, 50)
+    })
+  }
 }
