Mismatch between documentation & implementation of collapse.js

Created by: mrharel

According to the documentation of Collpase.js:

The data-target attribute accepts a CSS selector to apply the collapse to.

However in the Collapse.js code:

// COLLAPSE PUBLIC CLASS DEFINITION
  // ================================

  var Collapse = function (element, options) {
    this.$element      = $(element)
    this.options       = $.extend({}, Collapse.DEFAULTS, options)
    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')

As you can see the this.$trigger will only be set to the triggering element only if it has in the data-target an ID, and not any CSS selector.

This might lead to some unexpected behavior, which the "collapsed" class is not being applied to the button.

See the following example

<button class="btn" data-target="#tab1" data-toggle="collapse" type="button">button1</button>
<button class="btn" data-target=".tab2" data-toggle="collapse" type="button">button2</button>

when clicking on button1, it will get the class "collpased" which will allow me to style it in different states for collapsed and expand, but the other button will not get this class.

I suggest other fix the documentation or change the code.