Merge pull request #1385 from undp/1384-accordion-behaviors-are-not-w…

…orking-properly

#1384 - updated Accordion widget and documentation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/design-system",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "UNDP Design System",
   "homepage": "https://design.undp.org",
   "main": "index.js",

stories/Components/UIcomponents/Accordion/Accordion.stories.js

@@ -128,10 +128,10 @@ export default {
         <h4>States</h4>
         <p>An accordion panel has two states: collapsed and expanded. The chevron icon at the end of the accordion title should indicate the accordion panel’s state. By default, all panels of an accordion should begin at the collapsed state. The following behavior modifiers are available:</p>
         <ul>
-          <li><strong>Multi-expand</strong>. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element.</li>
-          <li><strong>Disabled</strong>: temporary removing expanding capability of the specific panel while preserving overall look and feel</li>
-          <li><strong>Active</strong>: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it</li>
-          <li><strong>Mobile Only</strong>: To shwo the Accordion on mobile device only we have to pass the attribute to the parent div eg: <code>&lt;div class="accordion" data-accordion="mobile"&gt;</code></li>
+          <li><strong>Multi-expand</strong>. By default only one panel of the accordion can be open at a time. It can be changed by assigning data-multi-expand=”true” attribute to the accordion’s outermost element. <code>&lt;div class="accordion" data-multi-expand="true"&gt;</code></li>
+          {/* <li><strong>Disabled</strong>: temporary removing expanding capability of the specific panel while preserving overall look and feel</li> */}
+          <li><strong>Active</strong>: while default state of all panels is “close” we can enable certain panels by assigning class .is-active to it: <code>&lt;li class="is-active"&gt;</code></li>
+          <li><strong>Mobile Only</strong>: To show the Accordion on mobile device only we have to pass the attribute to the parent div eg: <code>&lt;div class="accordion" data-accordion="mobile"&gt;</code></li>
         </ul>
         <h4>Interactions</h4>
         <p>The entire accordion title and chevron is selectable. Users can click anywhere in the title area to expand or collapse the content, providing a large, easy to manipulate target.</p>
@@ -166,5 +166,5 @@ AccordionStory.argTypes = {
   descriptionText: { table: { disable: true } },
 };
 
-  
+
 

stories/assets/js/accordion.js

@@ -13,9 +13,10 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
       jQuery(currentElem).siblings(accordinSiblingElement).slideDown('fast').attr('aria-hidden', false);
 
       // Close all other list items and panels.
-      jQuery(accordionListItem).not(jQuery(currentElem)).removeClass(accordionActiveElem).attr('aria-expanded', false);
-      jQuery(accordionListItem).not(jQuery(currentElem)).siblings(accordinSiblingElement).slideUp('fast')
-        .attr('aria-hidden', true);
+      if (!jQuery(accordionElement).data('multiExpand')) {
+        jQuery(accordionListItem).not(jQuery(currentElem)).removeClass(accordionActiveElem).attr('aria-expanded', false);
+        jQuery(accordionListItem).not(jQuery(currentElem)).siblings(accordinSiblingElement).slideUp('fast').attr('aria-hidden', true);
+      }
     } else {
       // Close active list item if open.
       jQuery(currentElem).removeClass(accordionActiveElem).attr('aria-expanded', false);
@@ -30,7 +31,7 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
       if (hasMobileAttr) {
         jQuery(accordionListItem).addClass('desktop-event-none').siblings(accordionSibling).addClass('desktop-visible');
       }
-      jQuery(accordionListItem).click(function (e) {
+      jQuery(accordionListItem, element).click(function (e) {
         e.preventDefault();
 
         // Callback function for Accordion Trigger.
@@ -42,7 +43,7 @@ export function accordion(accordionSelector, accordionSiblingSelector, accordion
         // Check if 'Enter' key is pressed.
         if (keycode == 13) accordionTrigger(jQuery(this), accordionListItem, accordionSibling, accordionActiveClass);
       });
-    });
+    }).find('.is-active button').first().trigger('click');
   };
 
   accordionClick(accordionElement, accordionPanel, accordionActiveElement);