Bootstrap: Bootstrap 3 accordion does not open/close on iPhone

[JohnReedLOL]

This accordion example...
https://getbootstrap.com/javascript/#collapse-example-accordion

It doesn't work on real iphone 3/4 Safari browsers because of this...
http://stackoverflow.com/questions/19866172/bootstrap-3-accordion-collapse-does-not-work-on-iphone

[ghost]

@JohnReedLOL the stackoverlow question has a solution there described. Why this issue is opened for?

http://getbootstrap.com/javascript/#collapse-example-accordion
In the given example:

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    Collapsible Group Item #1
</a>

Anchor has href attribute defined.

[patrickhlauke]

nope, works fine - tested on iphone 4 / iOS 7

[JohnReedLOL]

Using links instead of div tags is an acceptable solution for desktop users who hover their mouse over things before they click, but for touchscreen users who don't hover, the necessity to tap right on the text is unexpected or undesirably behavior. In this case you can kind of get away with it because the text takes up 3/4 of the space, but in general it doesn't fly. You might want to consider using a button instead of a link. https://notsomany.wordpress.com/2015/02/12/bootstrap-collapse-ios-issue/ . The reason I'm bringing this up is that people expect the examples showcased on the website to work seamlessly.

[patrickhlauke]

and the examples on the site DO work. as demonstrated above. not quite sure what your point is here

[patrickhlauke]

hang on...so is your problem more that it's not a block-level, 100% width control that's triggering the accordion? i guess that's a matter of taste/opinion, but can be easily overridden by giving a display:block to the trigger links

[JohnReedLOL]

Yes, but now you have another problem. Putting "a" tags around "h4" doesn't render the text in the style of an "h4". Putting "a" tags inside "h4" tags does, but it is considered bad/invalid HTML to put an inline "a" tag inside of "h4"

[patrickhlauke]

it is considered bad/invalid HTML to put an inline "a" tag inside of "h4"

by whom? and to be clear, from an accessibility standpoint, you really want the accordion triggers to be either links or <button> controls (depending on how exactly you want to view them)...and not just an arbitrary HTML element.

[ghost]

@JohnReedLOL, I completely sure that you should use anchor tags or buttons as @patrickhlauke already told. Also there is .h4 class for styling any element like it's h4 header, so it's seems to be easy to implement.