Issue 1:
Hello,

straight to the point:

To reproduce:

Go to Bootstrap website, collapse secition: link

Open up webdeveloper tools (I use Google Chrome), go to Console tab and execute: $("#collapse .accordion-body:last").collapse("show");

Result: The last accordion opens, but the first isn't closed.

The problem (briefly):

The third accordion doesn't have parent option set, because we didn't provide it.

The workaround solution:

Start the third accordion with parent option set, and after that try to show() it. Note, that hide() and toggle() also triggers this bug.

The proper solution:

Collapse constructor should look for parent setting (and all other too) in data- attributes of the $() element, as a fallback. If user doesn't provide these options, he obviously wants the Collapse to read those from data- attributes.

The cry story:

Wasted a couple of hours, why the accordion didn't work after show(). It's super counter intuitive, that the options aren't read from data- attributes, when you start the Collapse manual way. I suppose all other plugins inherit the same behaviour (starting by data- attributes reads options from these attributes, where starting manual way don't).

Kind regards

-------- Edit

It's funny when you notice your own mistake only after you cry about it.

Of course accordion-body doesn't have data- attributes to read from, so the The proper solution isn't quite working. But the problem remains. How do we mix the auto data- usage with the manual usage. I.e. how to achieve such a workflow:

Start the accordion/collapse through data- attributes.

open(), hide(), toggle(), whatever() the accordion manually (occasionally) later on.

?

-------- Edit

Ok, it was quite easy: $("#collapse .accordion-body:last").collapse({parent: "#accordion2"}, "show");. But, can you see the notobviousleness of this solution? If I wanna show() an accordion, I don't wanna think to which parent it belongs, since I've already provided the information in the accordion-toggle. I just want the damn thing to show itself properly ;p. Also note the information duplication in this solution, which simply leads to maintenance hell in the future.

Issue 2:
Hello! I am using the latest version of Bootstrap from this repo to render a group of checkbox buttons very much like in the demo.

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>

I've noticed a constantly reproducing issue. When I click on the checkbox button the actual input's checked DOM property sometimes is not being set correctly. That is I click on the button, the label changes it's state, BUT the firebug says that the input's DOM property was not changed. And firebug doe not lie, because when I submit the form the input value is incorrect.

The issue can be easily reproduced here. Just trigger all the checkboxed from the first line (1,2,3,4,5,6) and then look their's 'checked' DOM property. One or two of them will have incorrect values.

I've looked the source code and the problem is in this function

Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest('[data-toggle="buttons"]')

if ($parent.length) {
var $input = this.$element.find('input')
if ($input.prop('type') == 'radio') {
if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
else $parent.find('.active').removeClass('active')
}
if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
}

if (changed) this.$element.toggleClass('active')
}

The

if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')

line does not set the property for some reason. A very strange thing is that when I try to console.log($input.prop('checked')) after this line, it logs a correct value.

Any help is greatly appreciated.

Thank you.