Collapse does not work when trigger element is label and transition is deactivated

[LaurentVB]

Hello,

When deactivating the transitions, if the trigger element of the collapsing is a label containing a checkbox, and only if one clicks on the label text (not the checkbox), the element does not collapse.
From debugging, it looks like toggle is actually called twice, meaning the element is displayed and hidden immediately.

Tested in the latest chrome and firefox, with latest bootstrap 3.x and jquery 1.x
See http://jsbin.com/gosezuwama/1/edit?html,js,output for the repro.

Regards,

Laurent

[cvrebert]

This is just due to the inherent weirdness of click retargetting in HTML.
If you get rid of Bootstrap and just have a vanilla <label> and <input>, here's what happens when you click on the <label> text:

• A click event (let's call it c1) is fired with its target being the <label>
• Because clicking a <label> is supposed to be like clicking on its associated input, after c1 finishes propagating, the browser fires a new click event (let's call it c2) with the target this time being the <input>
• c2 bubbles and is dispatched at the <label> because it's an ancestor of the <input>

Thus, two click events get dispatched to the <label>, and thus toggle gets called twice.
The solution is to put the data-toggle="collapse" data-target="#collapse-target" on the <input> instead of the <label>.

[LaurentVB]

Thanks a lot for this very thorough explanation.