Merge branch 'accordion-split-sections' of github.com:tejohnso/founda…

…tion into tejohnso-accordion-split-sections
foundation · Apr 17, 2014 · 3acb3e7 · 3acb3e7
2 parents ed07198 + 3f20073
commit 3acb3e7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/doc/includes/accordion/examples_accordion_grid.html b/doc/includes/accordion/examples_accordion_grid.html
@@ -1,6 +1,6 @@
-<dl class="accordion" data-accordion>
-  <ul class="small-block-grid-1 medium-block-grid-3">
-    <li>
+<ul class="small-block-grid-1 medium-block-grid-3">
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel1c">Accordion 1</a>
         <div id="panel1c" class="content">
@@ -19,8 +19,10 @@
           Panel 3. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-    <li>
+    </dl>
+  </li>
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel4c">Accordion 4</a>
         <div id="panel4c" class="content">
@@ -39,6 +41,6 @@
           Panel 6. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-  </ul>
-</dl>
+    </dl>
+  </li>
+</ul>
diff --git a/doc/pages/components/accordion.html b/doc/pages/components/accordion.html
@@ -31,6 +31,27 @@ <h4>Rendered HTML</h4>
 
 ***
 
+<h3>Distributed accordion groups</h3>
+
+You can name the accordion so that it can be spread across different parent containers.  In this example the accordion is named *myAccordionGroup* and it is split between different columns in a block grid.  This allows the accordion to be responsive to screen width.
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{#markdown}}
+```html
+{{> examples_accordion_grid}}
+```
+{{/markdown}}
+  </div>
+  <div class="large-6 columns">
+    <h4>Rendered HTML</h4>
+    {{> examples_accordion_grid}}
+  </div>
+</div>
+
+***
+
 ## Customize With Sass
 
 Accordions can be easily customized with the Sass variables provided in the `_settings.scss` file.

diff --git a/js/foundation/foundation.accordion.js b/js/foundation/foundation.accordion.js
@@ -21,16 +21,20 @@
       var S = this.S;
       S(this.scope)
       .off('.fndtn.accordion')
-      .on('click.fndtn.accordion', '[' + this.attr_name() + '] dd > a', function (e) {
+      .on('click.fndtn.accordion', '[' + this.attr_name() + '] > dd > a', function (e) {
         var accordion = S(this).closest('[' + self.attr_name() + ']'),
             target = S('#' + this.href.split('#')[1]),
             siblings = S('dd > .content', accordion),
             aunts = $('dd', accordion),
+            groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
             settings = accordion.data(self.attr_name(true) + '-init'),
             active_content = S('dd > .content.' + settings.active_class, accordion);
         e.preventDefault();
 
-        if (! S(this).closest('dl').is(accordion)) { return; }
+        if (accordion.attr(self.attr_name())) {
+          siblings = siblings.add('[' + groupSelector + '] dd > .content');
+          aunts = aunts.add('[' + groupSelector + '] dd');
+        }
 
         if (settings.toggleable && target.is(active_content)) {
           target.parent('dd').toggleClass(settings.active_class, false);

diff --git a/spec/accordion/grid.html b/spec/accordion/grid.html
@@ -1,6 +1,6 @@
-<dl class="accordion" data-accordion>
-  <ul class="small-block-grid-1 medium-block-grid-3">
-    <li>
+<ul class="small-block-grid-1 medium-block-grid-3">
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel1c">Accordion 1</a>
         <div id="panel1c" class="content">
@@ -19,8 +19,10 @@
           Panel 3. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-    <li>
+    </dl>
+  </li>
+  <li>
+    <dl class="accordion" data-accordion="myAccordionGroup">
       <dd>
         <a href="#panel4c">Accordion 4</a>
         <div id="panel4c" class="content">
@@ -39,6 +41,6 @@
           Panel 6. Lorem ipsum dolor
         </div>
       </dd>
-    </li>
-  </ul>
-</dl>
+    </dl>
+  </li>
+</ul>