diff --git a/js/src/collapse.js b/js/src/collapse.js index f38878f9b3..edfc7ea851 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -50,6 +50,7 @@ const CLASS_NAME_SHOW = 'show' const CLASS_NAME_COLLAPSE = 'collapse' const CLASS_NAME_COLLAPSING = 'collapsing' const CLASS_NAME_COLLAPSED = 'collapsed' +const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}` const CLASS_NAME_HORIZONTAL = 'collapse-horizontal' const WIDTH = 'width' @@ -126,7 +127,7 @@ class Collapse extends BaseComponent { let activesData if (this._config.parent) { - const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) + const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent) actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth } @@ -253,7 +254,7 @@ class Collapse extends BaseComponent { return } - const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) + const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent) SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)) .forEach(element => { const selected = getElementFromSelector(element) diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 82cd5c1f76..da709bb85d 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -267,6 +267,63 @@ describe('Collapse', () => { collapse.show() }) + it('should be able to handle toggling of other children siblings', done => { + fixtureEl.innerHTML = [ + '