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.

Solution 1

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>

Solution 2

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

Solution 3

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.

Solution 4

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

cursor: pointer;

Solution 5

This is working for me :

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

View more solutions