Changes to better dovetail with current Foundation design patterns.

Changed method of detecting disabled per
https://github.com/zurb/foundation-sites/pull/9812#discussion_r109806300

Altered docs to reflect current functionality of disable accordions,
documented below.

If an accordion is disabled, all motion methods (`up`, `down`, `toggle`)
get eaten, with the exception of `down` when combined with `firstTime`.
Added a `console.info()` message to indicate when these methods are
attempted on a disabled accordion.

diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md
index 19980ca27db49a1c95936ec589b5832033dcbc17..e7024d694dddb942133d35258ec57f3dce481fdc 100644 (file)
--- a/docs/pages/accordion.md
+++ b/docs/pages/accordion.md
@@ -131,13 +131,17 @@ By default, at least one pane in an accordion must be open. This can be changed
 
 ### Disabled
 
-There may be times where you want to disable pane switching on an accordion. This can be accomplished by setting the disabled attribute.
+There may be times where you want to disable pane switching on an accordion. This can be accomplished by setting the `disabled` option.
+
+<div class="warning callout">
+  <p>The `disabled` option disables all up, down, and toggle methods of an accordion.  If you wish to manipulate a disabled accordion with <a href='#javascript-reference'>JavaScript</a>, you will need to remove the `disabled` option from the accordion.</p>
+</div>
 
 ```html_example
 <ul class="accordion" data-accordion disabled>
   <li class="accordion-item is-active" data-accordion-item>
     <a href="#" class="accordion-title">Accordion 1</a>
-    <div class="accordion-content" data-tab-content >
+    <div class="accordion-content" data-tab-content>
       Panel 1. I'm open because I'm loaded that way, but you can't close me
     </div>
   </li>

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 82209ccb114f3d1bd200171beee9afb5ed890472..5fbc1adc7b9979a371700decacbbe5ece4b7c511 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -153,7 +153,8 @@ class Accordion {
    * @function
    */
   toggle($target) {
-    if ($target.closest('.accordion').is('[disabled]')) {
+    if ($target.closest('[data-accordion]').is('[disabled]')) {
+      console.info('Cannot toggle an accordion that is disabled.');
       return;
     }
     if($target.parent().hasClass('is-active')) {
@@ -185,7 +186,8 @@ class Accordion {
      * checking firstTime allows for initial render of the accordion
      * to render preset is-active panes.
      */
-    if ($target.closest('.accordion').is('[disabled]') && !firstTime)  {
+    if ($target.closest('[data-accordion]').is('[disabled]') && !firstTime)  {
+      console.info('Cannot call down on an accordion that is disabled.');
       return;
     }
     $target
@@ -222,7 +224,8 @@ class Accordion {
    * @function
    */
   up($target) {
-    if ($target.closest('.accordion').is('[disabled]')) {
+    if ($target.closest('[data-accordion]').is('[disabled]')) {
+      console.info('Cannot call up on an accordion that is disabled.');
       return;
     }