Bootstrap data-toggle not working in Safari

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

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