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

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">

You can do it manually like so:

<a href="#accordion" id="my-link" class="btn btn-primary">Open group 2</a>

JS

$('#my-link').click(function(e) {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');        
});

Fiddle

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
  });
});

In order to scroll to the anchor, you should wait until your collapsable div is fully shown.

JQuery helps us to easily work out with that by collapse events.

$(document).ready(function() {
    $("#section-two").on('shown.bs.collapse', function() {
        window.location = "#section-two";
    });
});

Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.