Bootstrap accordion: how to avoid page scroll when collapse or expand elements

Replace the href properties on the a elements to # rather than, for example, #collapseOne

instead of this:

<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
     aria-expanded="true" aria-controls="collapseTwo">

do this

<a data-toggle="collapse" data-target="#collapseTwo" href="#"
     aria-expanded="true" aria-controls="collapseTwo">

I had same problem (jump to the top on click to the link which was triggering the collapse toggle) the href="#" was changed to href="javascript:void(0);" and it is working great (toggling collapse without any scrolling to the top)

I had the same issue. It turns out the href causes the problem. If you don't want the page to scroll at all when you collapse/expand, which is what I wanted, then simply remove the href altogether. Leaving it as # still made the screen scroll to the top for me.

did not work for me:

<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>

worked:

<a data-toggle="collapse" data-target="#collapseOne"></a>

See my update here: https://jsfiddle.net/Lfwvtyms/5/