bootstrap 3 accordion collapse does not work on iphone

So I think I figured this out: my original markup relied solely on the data-target element, but that is apparently not enough. Safari (on iPhone) seems to also need the href attribute (which really should be there on an <a> anyway. So this works:

<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">    <i class="pull-right icon-chevron-right mobile-nav-icon"></i></a>

But this does not:

<a data-toggle="collapse" data-target="#collapse1">    <i class="pull-right icon-chevron-right mobile-nav-icon"></i></a>

For me, collapse would work on desktop and iphone, but some of my collapses were not working on ipads. It turned out that perfect solution for me was given by @Loris in @Ryan's answer, to add the pointer style to any collapsable trigger (e.g., a div acting as a button). I generalized this to the following CSS:

[data-toggle~="collapse"] {    cursor: pointer;}

looking at this, I had the same problem, however, when you add a href="#collapse1", it jumps you to the top of the page. I fixed this by wrapping the element in a button and removed the css for buttons. So, your code would be:

<button data-toggle="collapse" data-target="#collapse1"><i class="pull-right icon-chevron-right mobile-nav-icon"></i></button>

Hope this helps.