collapse children with no data-parent

2 files changed, 48 insertions, 9 deletions

diff --git a/js/src/collapse.js b/js/src/collapse.js
index d3404630a..ad98ffa6a 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -127,7 +127,13 @@ const Collapse = (($) => {
 
       if (this._parent) {
         actives = [].slice.call(this._parent.querySelectorAll(Selector.ACTIVES))
-          .filter((elem) => elem.getAttribute('data-parent') === this._config.parent)
+          .filter((elem) => {
+            if (typeof this._config.parent === 'string') {
+              return elem.getAttribute('data-parent') === this._config.parent
+            }
+
+            return elem.classList.contains(ClassName.COLLAPSE)
+          })
 
         if (actives.length === 0) {
           actives = null
@@ -282,7 +288,8 @@ const Collapse = (($) => {
     }
 
     _getParent() {
-      let parent = null
+      let parent
+
       if (Util.isElement(this._config.parent)) {
         parent = this._config.parent
 
@@ -309,14 +316,12 @@ const Collapse = (($) => {
     }
 
     _addAriaAndCollapsedClass(element, triggerArray) {
-      if (element) {
-        const isOpen = $(element).hasClass(ClassName.SHOW)
+      const isOpen = $(element).hasClass(ClassName.SHOW)
 
-        if (triggerArray.length) {
-          $(triggerArray)
-            .toggleClass(ClassName.COLLAPSED, !isOpen)
-            .attr('aria-expanded', isOpen)
-        }
+      if (triggerArray.length) {
+        $(triggerArray)
+          .toggleClass(ClassName.COLLAPSED, !isOpen)
+          .attr('aria-expanded', isOpen)
       }
     }
 
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 7f4cedd74..e7fb8893e 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -855,4 +855,38 @@ $(function () {
       assert.ok(false, 'collapse not created')
     }
   })
+
+  QUnit.test('should find collapse children if they have collapse class too not only data-parent', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    var html =
+    '<div class="my-collapse">' +
+    '  <div class="item">' +
+    '    <a data-toggle="collapse" href="#">Toggle item 1</a>' +
+    '    <div id="collapse1" class="collapse show">Lorem ipsum 1</div>' +
+    '  </div>' +
+    '  <div class="item">' +
+    '    <a id="triggerCollapse2" data-toggle="collapse" href="#">Toggle item 2</a>' +
+    '    <div id="collapse2" class="collapse">Lorem ipsum 2</div>' +
+    '  </div>' +
+    '</div>'
+
+    $(html).appendTo('#qunit-fixture')
+
+    var $parent = $('.my-collapse')
+    var $collapse2 = $('#collapse2')
+    $parent.find('.collapse').bootstrapCollapse({
+      parent: $parent,
+      toggle: false
+    })
+
+    $collapse2.on('shown.bs.collapse', function () {
+      assert.ok($collapse2.hasClass('show'))
+      assert.ok(!$('#collapse1').hasClass('show'))
+      done()
+    })
+
+    $collapse2.bootstrapCollapse('toggle')
+  })
 })