Added ability to disable accordion controls.

diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md
index 615880d6e636c241dd4e7d5583719151540c2715..adee491aae27672073971ecfa8f905786e8e20a1 100644 (file)
--- a/docs/pages/accordion.md
+++ b/docs/pages/accordion.md
@@ -125,6 +125,39 @@ 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.
+
+```html
+<ul class="accordion" data-accordion disabled>
+  <!-- ... -->
+</ul>
+```
+
+<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 >
+      Panel 1. I'm open because I'm loaded that way, but you can't close me
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 2, you can't open me.</a>
+    <div class="accordion-content" data-tab-content>
+      Panel 2. Lorem ipsum dolor
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 3, you can't open me.</a>
+    <div class="accordion-content" data-tab-content>
+      Panel 3. Lorem ipsum dolor
+    </div>
+  </li>
+</ul>
+
+---
+
 ## Accordion and URLs
 
 ### Browser history

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 13977624f4feabeab2b12dcd8ba8c85d5438b645..82209ccb114f3d1bd200171beee9afb5ed890472 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -153,6 +153,9 @@ class Accordion {
    * @function
    */
   toggle($target) {
+    if ($target.closest('.accordion').is('[disabled]')) {
+      return;
+    }
     if($target.parent().hasClass('is-active')) {
       this.up($target);
     } else {
@@ -178,6 +181,13 @@ class Accordion {
    * @function
    */
   down($target, firstTime) {
+    /**
+     * checking firstTime allows for initial render of the accordion
+     * to render preset is-active panes.
+     */
+    if ($target.closest('.accordion').is('[disabled]') && !firstTime)  {
+      return;
+    }
     $target
       .attr('aria-hidden', false)
       .parent('[data-tab-content]')
@@ -212,6 +222,10 @@ class Accordion {
    * @function
    */
   up($target) {
+    if ($target.closest('.accordion').is('[disabled]')) {
+      return;
+    }
+
     var $aunts = $target.parent().siblings(),
         _this = this;
 

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index e29e76a0e8875fd582d713d6649aead1f8bd89f6..c646be7d151ee3e0454d956dbef36801de315226 100644 (file)
--- a/scss/components/_accordion.scss
+++ b/scss/components/_accordion.scss
@@ -53,6 +53,11 @@ $accordion-content-padding: 1rem !default;
   margin-#{$global-left}: 0;
   background: $background;
   list-style-type: none;
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
 }
 
 /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.