bootstrap 3 accordion collapse does not work on iphone

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;
}

You can fix this by simply adding this attribute to the div that triggers the dropdown.

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.

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>