Bootstrap Accordion - Page jumps to bottom first then go to top issue

Question

When I click on accordion tab, it goes to bottom of the page due to difference in amount of content and height of the content.

I used this code to send page to top, but its scroll the page to bottom first then animate it to the top, which looks weird.

$('#accordion').on('shown.bs.collapse', function () {
    window.elenow = $(this);
    $("html, body").animate({ scrollTop: $(window.elenow).offset().top }, 500);
});

I just want to page remain still when click on accordion tab, no go to top no go to bottom, just stay where its clicked.

Answer 1

You can prevent scrolling all together by changing your href to href="javascript:void(0);"

Here is a fiddle that shows the example.