Bootstrap: Collapse.js not working when on IOS and data-toggle element is not an a element

[theluk]

Hi,

when using following code example

<div class="collapsed" data-toggle="collapse" data-target="#something">
    <!-- More Element -->
</div>
<div id="something" class="collapse">
    <!-- content-->
</div>

then nothing happens when the data-toggle is touched on IOS devices. The handler in the collapse data-api is not called.

I could fix the issue replacing line 199 of collapse.js with following

$(document).on('click.bs.collapse.data-api touchstart.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {

[theluk]

just added

cursor:pointer

on the div

[cvrebert]

Yeah, it's a browser quirk that's not Bootstrap-specific; see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

[patrickhlauke]

@cvrebert didn't we recently add cursor:pointer to some more places in the CSS? worth doing it for all [data-toggle="collapse"] ?

[patrickhlauke]

@theluk as a side note, using a generic <div> as the toggle will make your collapse inaccessible to keyboard users (which is why the examples in http://getbootstrap.com/javascript/#collapse use focusable elements like <a> and <button>, which incidentally don't need the extra cursor:pointer fix)

[theluk]

@patrickhlauke thats true unless you make The collapsable for mobiles only and want to make an accordion like view. When using a elements, they could semantically make no sense when on desktop.

[patrickhlauke]

"mobile only" also - at least on Android - also has the scenario of users with a paired keyboard (in which case the same focusability problem applies). whether or not a link which links to a panel immediately following it (as in the examples in the docs) is semantic or not is more of a philosophical discussion (generally, i'd say a <button> is the cleaner way to go)