Bootstrap 3 Accordion Collapse Does Not Work on Iphone

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>

Bootstrap collapse half working on iPhone

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.

Bootstrap3 accordion table not working on IOS mobile

I've run into issues with iOS and bootstrap as well.

For some reason if you manually attach the click event to the tr elements it works without and issue but you can not pass the additional attribute to the selector.

http://jsfiddle.net/8x3ub2xz/

Seems to only have trouble attaching the click event when there are additional attributes passed to the selector? No idea why.

THIS WORKS

$(document).ready(function () {

    $("tr").click(function () {
        var sender = $(this);
        var targetId = $(sender.attr("data-target"))
        targetId.toggle().collapse();
    });

});

THIS DOES NOT

$(document).ready(function () {

    $("tr [data-toggle='collapse']").click(function () {
        var sender = $(this);
        var targetId = $(sender.attr("data-target"))
        targetId.toggle().collapse();
    });

});

Bootstrap collapse panel doesn't open on ipad

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

bootstrap collapse does not work correctly ,closes immediately after opening

Instead of collapsing the table, just gave it to a new div which covers the <table>... To get the collapsing animation
And also there was an extra double-quote " in your button code that was also the issue

I used data-bs-toggle="collapse" because i used bootstrap 5,
You can use data-toggle="collapse" if you are using bootstrap 4

The below code should get you what you're looking for...

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Get rate</button>
         
  <div class="collapse" id="collapseExample">       
            <table  class="table table-hover table-condensed  " >
            <thead>
              <tr>
                <th style="width:50% "></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row ">You Pay</th>
                <td>{{total}} SEK</td>
              </tr>
              <tr>
                <th scope="row ">Price</th>

                <td>{{price}} {{currency}}</td>
              </tr>
              <tr>
                <th scope="row ">Rate</th>
                <td colspan="2 ">{{rate}}</td>

              </tr>
            </tbody>
          </table>
          </div>

Bootstrap data-toggle not working on mobile

Try adding href="#" to the <a tag, which is actually not shown in your question. That solved it for me.

How to make a Bootstrap accordion collapse when clicking the header div?

All you need to do is to to use...

• data-toggle="collapse"
• data-target="#ElementToExpandOnClick"

...on the element you want to click to trigger the collapse/expand effect.

The element with data-toggle="collapse" will be the element to trigger the effect.
The data-target attribute indicates the element that will expand when the effect is triggered.

Optionally you can set the data-parent if you want to create an accordion effect instead of independent collapsible, e.g.:

• data-parent="#accordion"

I would also add the following CSS to the elements with data-toggle="collapse" if they aren't <a> tags, e.g.:

.panel-heading {
    cursor: pointer;
}

Here's a jsfiddle with the modified html from the Bootstrap 3 documentation.

---

Related Topics