Issue 4925 - Create accordion component for Help Center

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -18,10 +18,112 @@
 
     var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse");
     for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
     {
       toggleNavbarCollapseEls[i]
         .addEventListener("click", toggleNavbarCollapse, false);
     }
 
+    // Accordion menu
+
+    function setupAccordionMenu(accordionEl)
+    {
+      var accordionButtons = accordionEl.getElementsByClassName('accordion-toggle-button');
+      
+      for ( var i = 0; i < accordionButtons.length; i++ )
+      {
+        accordionButtons[i]
+          .addEventListener("click", toggleAccordionSection, false);
+        accordionButtons[i]
+          .addEventListener("keydown", navigateAccordionHeadings, false);
+
+        // Close all sections besides the first
+        if ( i !== 0 )
+        {
+          accordionButtons[i].setAttribute("aria-expanded", "false");
+          accordionButtons[i].setAttribute("aria-disabled", "false");
+          document
+            .getElementById( accordionButtons[i].getAttribute("aria-controls") )
+            .setAttribute("hidden", "true");
+        }
+      }
+    }
+    
+    function toggleAccordionSection()
+    {
+      // Hide currently expanded section
+      var accordion = this.parentElement.parentElement;
+      var expandedButton = accordion.querySelector("button[aria-expanded='true']");
+      if ( expandedButton )
+      {
+        expandedButton.setAttribute("aria-expanded", "false");
+        expandedButton.setAttribute("aria-disabled", "false");
+        document
+          .getElementById( expandedButton.getAttribute("aria-controls") )
+          .setAttribute("hidden", "true");
+      }
+
+      if ( expandedButton === this ) return;
+
+      // Expand new section
+      this.setAttribute("aria-expanded", "true");
+      this.setAttribute("aria-disabled", "true");
+      document
+        .getElementById( this.getAttribute("aria-controls") )
+        .removeAttribute("hidden");
+    }
+
+    function navigateAccordionHeadings(e)
+    {
+      if ( e.keyCode !== 38 && e.keyCode !== 40 ) return;
+
+      var accordion = this.parentElement.parentElement;
+
+      // Direction == up
+      if ( e.keyCode == 38 )
+      {
+        var prevEl = this.parentElement.previousElementSibling;
+        if ( prevEl )
+        {
+          prevEl // .accordion-body
+            .previousElementSibling // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+        else
+        {
+          accordion
+            .lastElementChild // .accordion-body
+            .previousElementSibling // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+      }
+
+      // Direction == down
+      else if ( e.keyCode == 40 )
+      {
+        var nextheading = this.parentElement.nextElementSibling.nextElementSibling;
+        if ( nextheading )
+        {
+          nextheading // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+        else
+        {
+          accordion
+            .firstElementChild // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+      }
+    }
+
+    var accordionMenus = document.getElementsByClassName('accordion');
+    for (var i = 0; i < accordionMenus.length; i++)
+    {
+      setupAccordionMenu( accordionMenus[i] );
+    }
+
   }, false);
 }());