How can I go to anchor and open a Bootstrap accordion at the same time?

Question

I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.

So I used the following:

<a href="#prizes" data-toggle="collapse" data-parent="#accordion"><i class="mdi-action-info"></i></a>

which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.

Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working

Answer 1

Building off of Michele's answer, here is an example where you can do an animated scroll to the div:

$(document).ready(function() {
  $('#accordionEvent').on('shown.bs.collapse', function() {
    var position = $('#accordionEvent').offset().top;
    $('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
  });
});

Answer 2

In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:

<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">