From ae71e71fe1fa3bdbdec33c9eb19b76c346d4d5ff Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <MartijnCuppens@users.noreply.github.com>
Date: Sun, 31 Dec 2017 13:53:33 +0100
Subject: Allow nested structure for accordions (#25121)

This commit allows nested structures for accordions. Also a part of
the documentation about data-children is removed because this
functionality didn't work and it's not applicable anymore.

Tests with the collapse accordion are also a bit adjusted to the new
situation.
---
 js/src/collapse.js        |  6 ++++-
 js/tests/unit/collapse.js | 58 +++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 53 insertions(+), 11 deletions(-)

(limited to 'js')

diff --git a/js/src/collapse.js b/js/src/collapse.js
index f4d140f27..eaad1be54 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -130,7 +130,11 @@ const Collapse = (($) => {
       let activesData
 
       if (this._parent) {
-        actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES))
+        actives = $.makeArray(
+          $(this._parent)
+            .find(Selector.ACTIVES)
+            .filter(`[data-parent="${this._config.parent}"]`)
+        )
         if (!actives.length) {
           actives = null
         }
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index f20c0809c..337ec647b 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -516,12 +516,50 @@ $(function () {
     var done = assert.async()
     var accordionHTML = '<div id="accordion">'
         + '<div class="item">'
-        + '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
-        + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>'
+        + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+        + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>'
         + '</div>'
         + '<div class="item">'
-        + '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
-        + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
+        + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+        + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>'
+        + '</div>'
+        + '</div>'
+
+    $(accordionHTML).appendTo('#qunit-fixture')
+    var $trigger = $('#linkTrigger')
+    var $triggerTwo = $('#linkTriggerTwo')
+    var $collapseOne = $('#collapseOne')
+    var $collapseTwo = $('#collapseTwo')
+    $collapseOne.on('shown.bs.collapse', function () {
+      assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
+      assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
+      $collapseTwo.on('shown.bs.collapse', function () {
+        assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
+        assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
+        done()
+      })
+      $triggerTwo.trigger($.Event('click'))
+    })
+    $trigger.trigger($.Event('click'))
+  })
+
+  QUnit.test('should allow accordion to contain nested elements', function (assert) {
+    assert.expect(4)
+    var done = assert.async()
+    var accordionHTML = '<div id="accordion">'
+        + '<div class="row">'
+        + '<div class="col-lg-6">'
+        + '<div class="item">'
+        + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+        + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>'
+        + '</div>'
+        + '</div>'
+        + '<div class="col-lg-6">'
+        + '<div class="item">'
+        + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+        + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>'
+        + '</div>'
+        + '</div>'
         + '</div>'
         + '</div>'
 
@@ -548,20 +586,20 @@ $(function () {
     var done = assert.async()
     $('<div id="accordion">'
         + '<div class="item">'
-        + '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
-        + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
+        + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
+        + '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
         + '<div id="nestedAccordion">'
         + '<div class="item">'
-        + '<a id="nestedLinkTrigger" data-parent="#nestedAccordion" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>'
-        + '<div id="nestedCollapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
+        + '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>'
+        + '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
         + '</div>'
         + '</div>'
         + '</div>'
         + '</div>'
         + '</div>'
         + '<div class="item">'
-        + '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
-        + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
+        + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
+        + '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
         + '</div>'
         + '</div>').appendTo('#qunit-fixture')
     var $trigger = $('#linkTrigger')
-- 
cgit v1.2.3