add dev-toc javascripts

javascripts/dev-toc.js

@@ -0,0 +1,23 @@
+const expandText = 'Expand All'
+const closeText = 'Close All'
+
+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
+
+    // on click, toggle all the details elements open or closed
+    const detailsElements = document.querySelectorAll('details')
+
+    for (const detailsElement of detailsElements) {
+      detailsElement.open 
+        ? detailsElement.removeAttribute('open')
+        : detailsElement.open = true
+    }
+  })
+}

javascripts/index.js

@@ -17,7 +17,11 @@ import { fillCsrf } from './get-csrf'
 import initializeEvents from './events'
 import filterCodeExamples from './filter-code-examples'
 import allArticles from './all-articles'
+import devToc from './dev-toc'
 
+if (location.pathname.endsWith('/dev-toc')) {
+  devToc()
+} else {
   document.addEventListener('DOMContentLoaded', async () => {
     displayPlatformSpecificContent()
     explorer()
@@ -37,3 +41,4 @@ document.addEventListener('DOMContentLoaded', async () => {
     filterCodeExamples()
     allArticles()
   })
+}