Accordion Example: Fix multiple expansion and click targets (pull #434)

* fix issue #424 * fix issue #425
w3c · Sep 14, 2017 · 74887d9 · 74887d9
1 parent 7403702
commit 74887d9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/examples/accordion/accordion.html b/examples/accordion/accordion.html
@@ -41,11 +41,13 @@ <h2 id="ex_label">Example</h2>
             Allow for each toggle to both open and close individually
 
           data-allow-multiple
-            Allow for multiple accordion sections to be expanded at the same time
+            Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise you would not be able to close any of the accordions
           __________
 
           Ex:
-            <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple data-allow-toggle>
+            <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-multiple>
+
+            <dl id="accordionGroup" role="presentation" class="Accordion" data-allow-toggle>
 
         -->
         <dl id="accordionGroup" role="presentation" class="Accordion">

diff --git a/examples/accordion/css/accordion.css b/examples/accordion/css/accordion.css
@@ -31,10 +31,15 @@
     background: hsl(0, 0%, 93%);
 }
 
+.Accordion-title {
+  pointer-events: none;
+}
+
 .Accordion-icon {
     border: solid hsl(0, 0%, 62%);
     border-width: 0 2px 2px 0;
     height: .5rem;
+    pointer-events: none;
     position: absolute;
     right: 1.5em;
     top: 50%;

diff --git a/examples/accordion/js/accordion.js b/examples/accordion/js/accordion.js
@@ -5,10 +5,10 @@ Gerard K. Cohen, 05/20/2017
 
 Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion) {
 
-  // Allow for each toggle to both open and close individually
-  var allowToggle = accordion.hasAttribute('data-allow-toggle');
   // Allow for multiple accordion sections to be expanded at the same time
   var allowMultiple = accordion.hasAttribute('data-allow-multiple');
+  // Allow for each toggle to both open and close individually
+  var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
 
   // Create the array of toggle elements for the accordion group
   var triggers = Array.from(accordion.querySelectorAll('.Accordion-trigger'));
@@ -20,30 +20,27 @@ Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion)
     if (target.classList.contains('Accordion-trigger')) {
       // Check if the current toggle is expanded.
       var isExpanded = target.getAttribute('aria-expanded') == 'true';
+      var active = accordion.querySelector('[aria-expanded="true"]');
 
-      if (!allowMultiple) {
-        // Close all previously open accordion toggles
-        triggers.forEach(function (trigger) {
-          if (trigger.getAttribute('aria-expanded') == 'true') {
-            // Hide all accordion sections, using aria-controls to specify the desired section
-            document.getElementById(trigger.getAttribute('aria-controls')).setAttribute('hidden', '');
-            // Set the expanded state on the triggering element
-            trigger.setAttribute('aria-expanded', 'false');
-          }
-        });
+      // without allowMultiple, close the open accordion
+      if (!allowMultiple && active && active !== target) {
+        // Set the expanded state on the triggering element
+        active.setAttribute('aria-expanded', 'false');
+        // Hide the accordion sections, using aria-controls to specify the desired section
+        document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
       }
 
-      if (allowToggle && isExpanded) {
-        // Close the activated accordion if allowToggle=true, using aria-controls to specify the desired section
-        document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
+      if (!isExpanded) {
         // Set the expanded state on the triggering element
-        target.setAttribute('aria-expanded', 'false');
-      }
-      else if (!allowToggle && !isExpanded) {
-        // Otherwise open the activated accordion, using aria-controls to specify the desired section
+        target.setAttribute('aria-expanded', 'true');
+        // Hide the accordion sections, using aria-controls to specify the desired section
         document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
+      }
+      else if (allowToggle && isExpanded) {
         // Set the expanded state on the triggering element
-        target.setAttribute('aria-expanded', 'true');
+        target.setAttribute('aria-expanded', 'false');
+        // Hide the accordion sections, using aria-controls to specify the desired section
+        document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', '');
       }
 
       event.preventDefault();