From: J. Eric Ellis <jellisii@gmail.com>
Date: Thu, 6 Apr 2017 14:21:59 +0000 (-0400)
Subject: Changes to better dovetail with current Foundation design patterns.
X-Git-Tag: v6.4.0-rc1~66^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9812%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 19980ca27..e7024d694 100644
--- 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 82209ccb1..5fbc1adc7 100644
--- 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;
     }