Bootstrap collapse half working on iPhone

Question

I'm building a web page with a hidden div which collapses when clicking on another div. The problem is that the div won't collapse when I use iPhones (computers and other devices work just fine). I've even tried Safari on my laptop and it worked properly.

The content of the page was initially inserted to the the page using jQuery and it worked. However I wanted it to be loaded on a different page so now the content is loaded with the rest of the page after I'm clicking on a link.

When I used the developer tools for iOS I noticed that there is no error resulting from clicking on the link, actually, no event was triggered. When I used jQuery to explicitly toggle the collapse it actually worked.

On Google Chrome app for iOS it didn't work as well.

When I simply copy-pasted bootstrap collapse from w3schools to my webpage, their collapse worked and mine didn't. Therefore I add some of the source code, maybe there's something I missed:

<div class="result_header" data-toggle="collapse" data-target="#source_1_collapse">
    <h2 class="result_h2">Results for "a": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    <table class="table _table-striped _table-hover" id="source_1_table">
    .
    .
    </table>
</div>

Thanks for any help.

Answer 1

Well, the answer was there and i didn't see it...

After a long research I've found this article which explains that the problem was in the binding of an event to an unclickable element.

Apparently iPhones' safari won't let elements other then input or links to trigger a "click" event.

The solution is to add to the unclickable element an "onlick" attribute which leads to an empty function and now the element is clickable.

I've changed my code into this:

<div onclick="none()" class="result_header" data-toggle="collapse" data-target="source_1_collapse" >
   <h2 class="result_h2">Results for "{{name}}": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    .
    .
</div>

<script>
    function none(){}
</script>

And it works now.

Hope it helps, good day.