bootstrap 3 accordion collapse does not work on iphone

Question

These "accordion submenus" work in chrome and firefox, but not on an iphone.

I have built a site which includes an "offcanvas" navigation menu on smaller screens. The user clicks "the hot dog button", and the navigation menu slides onto the screen from the left... that works great so far.

Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.

The Problem

I develop using chrome on linux. This mechanism works perfectly in chrome, firefox, and every browser I can get my hands on, as well as on my personal android phone. It also works on responsinator.com. However, since I don't have Safari, nor an iPhone, I have not been able to test this functionality directly on an iphone. I am working on getting an iPhone emulator...

Until then, some other people have looked at this on an iPhone, and I am told the "submenus" do not work at all. When the user clicks the arrow, nothing happens...

Here is an excerpt of a "menu item" containing a "sub-menu": please note I am using the 'data-toggle' and 'data-target' attributes:

<div class="panel panel-default">
    <!-- The "Trigger" -->
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="view.php?cms_nav_id=1" name="about">
                About</a>
            <a data-toggle="collapse" data-target="#collapse1">
                <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
            </a>
        </h4>
    </div>

    <!-- Populated submenus: -->
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a>
        </div>
        <div class="panel-body">
            <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a>  
        </div>
    </div>

</div><!-- /.panel -->

I really don't know what to try next: Similar questions have ended with "a css conflict" or iphone problems regarding .click(), but I am not using that: I am using data-toggle/data-target. I am considering abandoning the 'data-target' markup in favor of manually invoking an on('click', ... ) event, but I would rather not...

By the way, I call this at the bottom of my page if that's relevant:

<script src="/assets/dist/js/bootstrap.min.js"></script>

Which is 'bootstrap.js v3.0.0' .

Does anyone have any other clues? Any recent direct experience with an issue like this?

Thanks in advance for your help.

Answer 1

2024 and Bootstrap version I am using is https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css and this problem for iphone still exist. For the programmers experiencing this until today. This is the solution I found.

$(document).ready(function() {
  // Toggle the accordion
  $('.accordion-button').on('click', function() {
    var accordionContent = $(this).closest('.accordion-item').find('.accordion-collapse');
    accordionContent.slideToggle(200);
  });
});

I almost gave up using bootstrap accordion and wanted to use the normal accordion with jquery. When miracle happens :) The jquery above works fro my bootstrap accordion. Hope this post can help!

Answer 2

Enabling the animation will cause some problems in IOS devices. Disable it and it will work. That was the case for me.

[isAnimated]="false"

Answer 3

for further reference:

I did this in my application:

a[data-toggle="collapse"]{
  cursor:pointer;
}

And it fixed the problem.

In the MDN documentation says this:

"Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of 'clickable element'"

References:

• https://github.com/twbs/bootstrap/issues/16213

• https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

Answer 4

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

cursor: pointer;

Answer 5

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

Answer 6

This is working for me :

$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});

Answer 7

To make this work for any element type, such as a div, you can use the following jQuery method (tested ios 8):

<div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>

Answer 8

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.

Answer 9

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>