Accordion now also supports the data-content attribute to point to the content element.

diff --git a/doc/includes/accordion/examples_accordion_basic.html b/doc/includes/accordion/examples_accordion_basic.html
index 27cbbea162ca7fd58f1d58950f6e650ccaae6e58..f587fa1388fde46f844ac9930957ccb56dac2a71 100644 (file)
--- a/doc/includes/accordion/examples_accordion_basic.html
+++ b/doc/includes/accordion/examples_accordion_basic.html
@@ -43,3 +43,26 @@
     </div>
   </dd>
 </dl>
+
+<!-- You can also use data-content instead of href to point to the content of the accordion -->
+
+<ul class="accordion" data-accordion>
+  <li class="accordion-navigation">
+    <a href="#" data-content="panel3a">Accordion 1</a>
+    <div id="panel3a" class="content active">
+      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </li>
+  <li class="accordion-navigation">
+    <a href="#" data-content="panel3b">Accordion 2</a>
+    <div id="panel3b" class="content">
+      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </li>
+  <li class="accordion-navigation">
+    <a href="#" data-content="panel3c">Accordion 3</a>
+    <div id="panel3c" class="content">
+      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </li>
+</ul>
\ No newline at end of file

diff --git a/js/foundation/foundation.accordion.js b/js/foundation/foundation.accordion.js
index f01fca28b55c891a6250cb290cce9e5f1c9c61f9..5cb1cb6a4479372539f4726673ee3f0690424c95 100644 (file)
--- a/js/foundation/foundation.accordion.js
+++ b/js/foundation/foundation.accordion.js
@@ -29,7 +29,8 @@
         var accordion = S(this).closest('[' + self.attr_name() + ']'),
             groupSelector = self.attr_name() + '=' + accordion.attr(self.attr_name()),
             settings = accordion.data(self.attr_name(true) + '-init') || self.settings,
-            target = S('#' + this.href.split('#')[1]),
+            contentAttr = S(this).context.attributes['data-content'],
+            target = S('#' + (contentAttr ? contentAttr.value : this.href.split('#')[1])),
             aunts = $('> dd, > li', accordion),
             siblings = aunts.children('.' + settings.content_class),
             active_content = siblings.filter('.' + settings.active_class);

diff --git a/spec/accordion/basic.html b/spec/accordion/basic.html
index c777fa7bdb0c66c4e996f95895b6d82f5dc2e83b..100893619d9920dff5672ebb7001b9f9ad1ed5bd 100644 (file)
--- a/spec/accordion/basic.html
+++ b/spec/accordion/basic.html
@@ -1,6 +1,6 @@
 <dl class="accordion" data-accordion>
   <dd class="accordion-navigation">
-    <a href="#panel1">Accordion 1</a>
+    <a href="#" data-content="panel1">Accordion 1</a>
     <div id="panel1" class="content active">
       <dl class="tabs" data-tab>
         <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
@@ -31,7 +31,7 @@
     </div>
   </dd>
   <dd class="accordion-navigation">
-    <a href="#panel3">Accordion 3</a>
+    <a href="#panel3" data-content="panel3">Accordion 3</a>
     <div id="panel3" class="content">
       Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>

diff --git a/spec/accordion/grid.html b/spec/accordion/grid.html
index a68bdd18784999a1321e3cc2ff94df1f92025083..6d11c6274557211fb3602720a8fdd45e9a629627 100644 (file)
--- a/spec/accordion/grid.html
+++ b/spec/accordion/grid.html
@@ -2,7 +2,7 @@
   <li>
     <dl class="accordion" data-accordion="myAccordionGroup">
       <dd class="accordion-navigation">
-        <a href="#panel1c">Accordion 1</a>
+        <a href="#" data-content="panel1c">Accordion 1</a>
         <div id="panel1c" class="content">
           Panel 1. Lorem ipsum dolor
         </div>
@@ -14,7 +14,7 @@
         </div>
       </dd>
       <dd class="accordion-navigation">
-        <a href="#panel3c">Accordion 3</a>
+        <a href="#panel3c" data-content="panel3c">Accordion 3</a>
         <div id="panel3c" class="content">
           Panel 3. Lorem ipsum dolor
         </div>
@@ -24,7 +24,7 @@
   <li>
     <dl class="accordion" data-accordion="myAccordionGroup">
       <dd class="accordion-navigation">
-        <a href="#panel4c">Accordion 4</a>
+        <a href="#" data-content="panel4c">Accordion 4</a>
         <div id="panel4c" class="content">
           Panel 4. Lorem ipsum dolor
         </div>
@@ -36,7 +36,7 @@
         </div>
       </dd>
       <dd class="accordion-navigation">
-        <a href="#panel6c">Accordion 6</a>
+        <a href="#panel6c" data-content="panel6c">Accordion 6</a>
         <div id="panel6c" class="content">
           Panel 6. Lorem ipsum dolor
         </div>

diff --git a/spec/accordion/multiexpand.html b/spec/accordion/multiexpand.html
index d8adb252ce55fb797bdad08ffc53647871d2c15d..9960e734626db96a9d886a9c338998cf756c227e 100644 (file)
--- a/spec/accordion/multiexpand.html
+++ b/spec/accordion/multiexpand.html
@@ -1,6 +1,6 @@
 <dl class="accordion" data-accordion>
   <dd class="accordion-navigation">
-    <a href="#panel1">Accordion 1</a>
+    <a href="#" data-content="panel1">Accordion 1</a>
     <div id="panel1" class="content">
       Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>
@@ -12,7 +12,7 @@
     </div>
   </dd>
   <dd class="accordion-navigation">
-    <a href="#panel3">Accordion 3</a>
+    <a href="#panel3" data-content="panel3">Accordion 3</a>
     <div id="panel3" class="content">
       Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div>