Bootstrap accordion scrolling behaviour on collapse

Question

I am using Bootstrap 3 accordion. After reading numerous posts on how to have independent behaviour on the contents, rather than keeping only one active by default, i use data-target and the id if the content instead of the default data-parent of the accordion id. The independent collapsing works fine, but now on collapse it scrolls to the top of the collapsible item. How can I disable this scrolling behaviour whilst keeping the collapsible in-dependancy?

Answer 1

I think i know what causes the scrolling problem. If you are based on the example shown in getbootstrap.com, then you probably use anchors

<a data-toggle="collapse" data-content="#your-content" href="#your-content">...</a>

instead of anchors you can use spans

<span data-toggle="collapse" data-content="#your-content">...<span>

The href in the anchor is causing the scroll. I hope that helps

Answer 2

Just add class="your-header-class" to the a header element:

<a class="your-header-class" data-toggle="collapse" data-content="#your-content" href="#your-content">...</a>

and then add this:

$('.your-header-class').click(function(e) {
    e.preventDefault();
})