diff --git a/js/src/collapse.js b/js/src/collapse.js index ed3c064b16..13c44502ca 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -57,7 +57,8 @@ const Collapse = (($) => { const Selector = { ACTIVES : '.card > .show, .card > .collapsing', - DATA_TOGGLE : '[data-toggle="collapse"]' + DATA_TOGGLE : '[data-toggle="collapse"]', + DATA_CHILDREN : 'data-children' } @@ -77,13 +78,20 @@ const Collapse = (($) => { `[data-toggle="collapse"][href="#${element.id}"],` + `[data-toggle="collapse"][data-target="#${element.id}"]` )) - this._parent = this._config.parent ? this._getParent() : null if (!this._config.parent) { this._addAriaAndCollapsedClass(this._element, this._triggerArray) } + this._selectorActives = Selector.ACTIVES + if (this._parent) { + const childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null + if (childrenSelector !== null) { + this._selectorActives = `${childrenSelector} > .show, ${childrenSelector} > .collapsing` + } + } + if (this._config.toggle) { this.toggle() } @@ -124,7 +132,7 @@ const Collapse = (($) => { let activesData if (this._parent) { - actives = $.makeArray($(this._parent).find(Selector.ACTIVES)) + actives = $.makeArray($(this._parent).find(this._selectorActives)) if (!actives.length) { actives = null } diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index 7139304338..c39adacdb0 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -490,4 +490,27 @@ $(function () { .bootstrapCollapse('show') }) + QUnit.test('should allow accordion to use children other than card', function (assert) { + assert.expect(2) + var done = assert.async() + var accordionHTML = '
' + + $(accordionHTML).appendTo('#qunit-fixture') + var $target = $('#linkTrigger') + $('#collapseOne').on('shown.bs.collapse', function () { + assert.ok($(this).hasClass('show')) + assert.ok(!$('#collapseTwo').hasClass('show')) + done() + }) + $target.trigger($.Event('click')) + }) })