Using bootstrap accordion on an angularjs page

Question

I am having an issue when I try to run the following code in an AngularJS page.

      <div class='panel-group' id=accordion'>
        <div class="panel panel-default">
          <h4 class="panel-title">
            <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>foo</a>
          </h4>
          <div id='collapseOne' class='panel-collapse collapse'>
            <div class='panel-body'>
              <p>foo</p>
            </div>
          </div>
        </div>
      </div>

The code is correct, but since Angular uses # as an anchor for the routine, when I click to toggle my accordion, it redirects me to my homepage. Is there any way I could prevent this ?

ps: I know there is a library ui-bootstrap for angularjs with a directive to handle accordion, I just would like to know if there is a way to solve my issue without it :).

Starscream1984 · Accepted Answer · 2015-11-12 09:44:57Z

3

If you want a quick slightly hacky way without writing your own directive or using BootstrapUI, you could perhaps bypass the bootstrap jQuery way of toggling the accordion and put angular directives into the markup instead:

<div class='panel-group' id=accordion'>
    <div class="panel panel-default">
        <h4 class="panel-title">
            <a data-ng-click="accordion1 = !accordion1">foo</a>
        </h4>
        <div data-ng-show="accordion1">
            <div class='panel-body'>
                <p>foo</p>
            </div>
        </div>
    </div>
</div>

Might need some slight css if the removed collapse classes from the body wrapper do anything apart from just show/hide

answered Nov 12, 2015 at 9:44

Starscream1984

3,0621 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BlissSol Over a year ago

Excellent answer ~ it solved my problems. The only thing the 'collapse' class seems to add (in difference with this Angular) is a smooth drop-down effect;

Collectives™ on Stack Overflow

Using bootstrap accordion on an angularjs page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related