From: Michiel van der Meer <michielmeer1990@hotmail.com>
Date: Fri, 9 Oct 2015 05:55:16 +0000 (+0200)
Subject: Accordion now also supports the data-content attribute to point to the content element.
X-Git-Tag: v6.0.0~22^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6928%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 27cbbea16..f587fa138 100644
--- 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 f01fca28b..5cb1cb6a4 100644
--- 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 c777fa7bd..100893619 100644
--- 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 a68bdd187..6d11c6274 100644
--- 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 d8adb252c..9960e7346 100644
--- 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>