]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 58e204e)
Prevent closing an accordion pane from also closing the panes of accordions inside...
authorGeoff Kimball <geoff@zurb.com>
Thu, 3 Mar 2016 17:44:02 +0000 (09:44 -0800)
committerGeoff Kimball <geoff@zurb.com>
Thu, 3 Mar 2016 17:44:02 +0000 (09:44 -0800)
js/foundation.accordion.js patch | blob | blame | history
test/visual/accordion/nested.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 41dbd349d300fa23a0f640b3d85fb0718f841aa1..15aa9cedb3b66de9398cff9a6f4324a1387218e3 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -139,7 +139,7 @@ class Accordion {
    */
   down($target, firstTime) {
     if (!this.options.multiExpand && !firstTime) {
-      var $currentActive = this.$element.find('.is-active').children('[data-tab-content]');
+      var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
       if($currentActive.length){
         this.up($currentActive);
       }
diff --git a/test/visual/accordion/nested.html b/test/visual/accordion/nested.html
new file mode 100644 (file)
index 0000000..55a4d2a
--- /dev/null
+++ b/test/visual/accordion/nested.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Foundation for Sites Testing</title>
+  <link href="../assets/css/foundation.css" rel="stylesheet" />
+  <style>
+    .accordion-title[aria-expanded="true"] {
+      border-top: 1px solid dodgerblue;
+    }
+
+    .accordion-title[aria-selected="true"] {
+      border-bottom: 1px solid red;
+    }
+  </style>
+</head>
+<body>
+  <div class="row column">
+    <h1>Accordion: Nesting</h1>
+
+    <p>These are nested accordions.</p>
+
+    <ul>
+      <li>A title with <code>aria-expanded="true"</code> has a blue border.</li>
+      <li>A title with <code>aria-selected="true"</code> has a red border.</li>
+      <li>An open item should have <strong>both borders</strong>.</li>
+      <li>Manipulating one accordion shouldn't affect the other.</li>
+    </ul>
+
+    <ul class="accordion" data-accordion>
+      <li class="accordion-item is-active" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 1</a>
+        <div class="accordion-content" data-tab-content>
+          <p>Base Accordion</p>
+          <ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
+            <li class="accordion-item is-active" data-accordion-item>
+              <a href="#" class="accordion-title">Accordion 1</a>
+              <div class="accordion-content" data-tab-content>
+                Nested Accordion
+              </div>
+            </li>
+            <li class="accordion-item" data-accordion-item>
+              <a href="#" class="accordion-title">Accordion 1</a>
+              <div class="accordion-content" data-tab-content>
+                Nested Accordion
+              </div>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="accordion-item" data-accordion-item>
+        <a href="#" class="accordion-title">Accordion 1</a>
+        <div class="accordion-content" data-tab-content>
+          <p>Base Accordion</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <script src="../assets/js/vendor.js"></script>
+  <script src="../assets/js/foundation.js"></script>
+  <script>
+  $(document).foundation();
+  </script>
+</body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git