Bootstrap data-toggle not working in Safari

Question

The below code making use of bootstrap's data-toggle="collapse" to do the functionality of collapse/expand on click of configured element, In this case, clicking parent1 and parent2

Problem: On click of parent element, the collapse is working from my PC using Chrome and firefox browsers, but it is not working from my iPad using safari browser.

<div id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1">
  <strong>Technologies </strong>
</div>

<div id="childof1" class="collapse">
  <!-- elements of child1 -->
</div

<div id="parent2" type="button" class="parentclass" data-toggle="collapse" data-target="#childof2">
  <strong>Vertical </strong>
</div>

<div id="childof2" class="collapse">
  <!-- elements of child2 -->
</div

References: http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

score 8 · Accepted Answer · edited Feb 20 '23 at 10:11

8

I tried using a <a> instead of <div> in parent elements where we click to expand/collapse, ie

<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1">
  <strong>Technologies </strong>
</a>

and updated the styling of parentclass to have display: block;, and tested in iPad, now its working from iPad safari browser too!

Updates 1: Saw one post where it is suggesting also to use href to make Safari in iPhone understand, but I am not sure if I must use that attribute too, as when I test with href too, everytime I touch on the parent header, the page gives an impression of refreshing [page moves]. So thinking that href is not needed.

<a id="parent1" type="button" class="parentclass" data-toggle="collapse" data-target="#childof1" href="#childof1">

Updates 2

Updated using <button> instead of <a> so that expectation of an href could be easily ruled out. The output is still as expected, working in Chrome, Firefox as well as Safari.

Please suggest if this is correct approach or have any alternate fixes

more about data-toggle and data-*: The data-toggle attributes in Twitter Bootstrap

edited Feb 20 '23 at 10:11

Mattia Righetti

1,265
1
18
31

answered May 18 '15 at 22:30

spiderman

10,892
12
50
84

2

I had the same problem, and adding href="javascript: void(0)" fixed the problem for me. The old javascript void trick avoids any page refreshing problems. – fred2 Sep 14 '15 at 19:36
1

@fred2, thanks for that point, I think that's good one, however I am still using ` – spiderman Sep 15 '15 at 01:03
Sure - not suggesting it's a better solution, just an alternative one. – fred2 Sep 15 '15 at 15:16
4

Adding `href="#"` to the `a` tag made it work on iPhone 6 Safari. – Seppo Erviälä Sep 19 '16 at 13:34
following up on fred2's suggestion above, if you're using a `` tag, within the tag, add `onclick="javascript:void(0)"` – rprasad Jan 01 '18 at 14:45

Bootstrap data-toggle not working in Safari

1 Answers1

Linked