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: 
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](http://jsfiddle.net/tomanow/DSGxz/632/)
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. **Best of all it's dynamic** so you don't need to manually code a bunch of functions for each according group.

Your webpage will look something like this:

```
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-one" target="_blank">Section One</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section One Text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-two" target="_blank">Section Two</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section Two Text
      </div>
    </div>
  </div>
</div>
<div>

```

Now for the code:

```
$(".accordian-button").click(function(e) {
  that = $(this)
  accordian = that.siblings('.accordian-body')
  $(".accordian-body").not(accordian).collapse('hide')
  accordian.collapse('toggle')
})

// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')

```

Here's a working fiddle:  

<http://jsfiddle.net/dkcb8jLq/31/>

Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.