Bootstrap collapse panel doesn't open on ipad

Question

I'm using Bootstrap (3.3.5) with the sb-admin-2 theme. My collapse panels work fine on desktop ( chrome on OsX ) and phone ( Chrome on Android ), but will not open on Ipad ( either chrome or safari ).

Here is the code for one of my panels:

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo">
        <h4 class="panel-title">Select Columns</h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum</div>
    </div>
</div>

I saw from this other SO answer, that if I implement the collapse using an <a> tag, and have an href that this fixes the ipad issue. Witchfinder's answer here:

Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Like so:

<h4 class="panel-title">
    <a class="panel-heading collapsed" data-toggle="collapse" 
        data-target="#collapseTwo" href="#collapseTwo">
        Select Columns
    </a>
</h4>

I tried this and it does fix it. Sort of. But it has some problems:

1. The entire bar is no longer clickable, just the text. I want the bar.
2. The href is an anchor link, so when you click it, it updates the address bar, and it causes the page to jump to the panel body. Without the href, the address bar stays the same, and the page does not jump. Much nicer.

I tried the other solution from that question where you edit the code to bootstrap - to remove the ontouchstart but in my case that did not fix it.

Does anyone know how to fix this without the adding the href? Or at least what is going on. Where is the click going?

Answer 1

This might be a trick for The entire bar is no longer clickable, just the text. I want the bar part but just try once:

Cover your entire bar with one more anchor having href="#collapseTwo" and am pretty sure it should target the entire bar now.

<a href="#collapseTwo">
   <h4 class="panel-title">
      <a class="panel-heading collapsed" data-toggle="collapse" 
          data-target="#collapseTwo" href="#collapseTwo">
          Select Columns
      </a>
   </h4>
</a>

Regarding url change, I think its inevitable, not sure though.

I found in one more post that setting style="cursor: pointer;" to the element also works. Useful if you're not using an anchor tag! which might solve your url problem