Collapse - Allow to pass jQuery object or DOM element to the parent option

docs/4.0/components/collapse.md

@@ -186,9 +186,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
  <tbody>
  <tr>
  <td>parent</td>
- <td>selector</td>
+ <td>selector | jQuery object | DOM element </td>
  <td>false</td>
- <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
+ <td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
  </tr>
  <tr>
  <td>toggle</td>

js/src/collapse.js

@@ -33,7 +33,7 @@ const Collapse = (() => {
 
  const DefaultType = {
  toggle : 'boolean',
- parent : 'string'
+ parent : '(string|element)'
  }
 
  const Event = {
@@ -289,7 +289,18 @@ const Collapse = (() => {
  }
 
  _getParent() {
- const parent = $(this._config.parent)[0]
+ let parent = null
+ if (Util.isElement(this._config.parent)) {
+ parent = this._config.parent
+
+ // it's a jQuery object
+ if (typeof this._config.parent.jquery !== 'undefined') {
+ parent = this._config.parent[0]
+ }
+ } else {
+ parent = $(this._config.parent)[0]
+ }
+
  const selector =
  `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
 

js/src/util.js

@@ -32,10 +32,6 @@ const Util = (() => {
  return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
  }
 
- function isElement(obj) {
- return (obj[0] || obj).nodeType
- }
-
  function getSpecialTransitionEndEvent() {
  return {
  bindType: transition.end,
@@ -138,12 +134,16 @@ const Util = (() => {
  return Boolean(transition)
  },
 
+ isElement(obj) {
+ return (obj[0] || obj).nodeType
+ },
+
  typeCheckConfig(componentName, config, configTypes) {
  for (const property in configTypes) {
  if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
  const expectedTypes = configTypes[property]
  const value = config[property]
- const valueType = value && isElement(value) ?
+ const valueType = value && Util.isElement(value) ?
  'element' : toType(value)
 
  if (!new RegExp(expectedTypes).test(valueType)) {

js/tests/unit/collapse.js

@@ -698,4 +698,48 @@ $(function () {
 
  $target.trigger($.Event('click'))
  })
+
+ QUnit.test('should allow jquery object in parent config', function (assert) {
+ assert.expect(1)
+ var html =
+ '<div class="my-collapse">' +
+ ' <div class="item">' +
+ ' <a data-toggle="collapse" href="#">Toggle item</a>' +
+ ' <div class="collapse">Lorem ipsum</div>' +
+ ' </div>' +
+ '</div>'
+
+ $(html).appendTo('#qunit-fixture')
+ try {
+ $('[data-toggle="collapse"]').bootstrapCollapse({
+ parent: $('.my-collapse')
+ })
+ assert.ok(true, 'collapse correctly created')
+ }
+ catch (e) {
+ assert.ok(false, 'collapse not created')
+ }
+ })
+
+ QUnit.test('should allow DOM object in parent config', function (assert) {
+ assert.expect(1)
+ var html =
+ '<div class="my-collapse">' +
+ ' <div class="item">' +
+ ' <a data-toggle="collapse" href="#">Toggle item</a>' +
+ ' <div class="collapse">Lorem ipsum</div>' +
+ ' </div>' +
+ '</div>'
+
+ $(html).appendTo('#qunit-fixture')
+ try {
+ $('[data-toggle="collapse"]').bootstrapCollapse({
+ parent: $('.my-collapse')[0]
+ })
+ assert.ok(true, 'collapse correctly created')
+ }
+ catch (e) {
+ assert.ok(false, 'collapse not created')
+ }
+ })
 })