Bootstrap collapse accordions with AngularJS

Question

A similar question was asked here, and it was a question similar to what I had. I suspected the anchor was problematic with Angular's routing, but now the collapse's are unresponsive. No open or expanding occurs when clicking. Is there some extra implementation that needs to be done to make it work in AngularJS beyond adding the data-target tag?

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Provide a minimal code sample that demonstrates your problem. This question is too vague. — Seth Flowers, Jan 19 '16 at 18:40
Done. The issue with the anchor and href seems to have been confirmed [here](https://github.com/angular/angular.js/issues/1557#issuecomment-10303715). By all accounts, data-target should be working as a replacement, but it seems to not be in my case. Here's an example [pen](http://codepen.io/AndrewSquared/pen/qbpJPr). — Andrew Karstaedt, Jan 21 '16 at 17:37

score 1 · Answer 1 · answered Jan 21 '16 at 17:44

1

If you look here, they show an example using the data-parent tag.

Like this:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit</div>
    </div>
  </div>
</div>

This second example is from w3schools.

answered Jan 21 '16 at 17:44

Rick Wolff

769
11
25

Oops. Haven't seen your comment, @AndrewSquared – Rick Wolff Jan 21 '16 at 17:46
Thanks, it seems to work in the codepen, but not in my environment. And I can't seem to figure out why. I think it relates to the jquery library. When I load it after the bootstrap library, the data-target does not work, but if I load it before, it does work. This behavior is irrespective of Angular. – Andrew Karstaedt Jan 21 '16 at 17:54
1

@AndrewSquared - Sounds like you are supposed to include jQuery before bootstrap... According to bootstraps docs - "Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported." – Seth Flowers Jan 21 '16 at 18:15
This was correct. I had presumed that setting the bower dependency with bootstrap brought in the compiled version (which includes jQuery), but it instead has a nested bower dependency and brings in jQuery as a separate library - requiring the individual includes. – Andrew Karstaedt Jan 22 '16 at 15:39

score 1 · Accepted Answer · answered Jan 21 '16 at 18:41

So, it turns out the issue was to do with the bower package of bootstrap that I had. The bower install of bootstrap does not provide the compiled version of bootstrap.js, instead it downloads jquery as a separate library, and both need to be included (with the dependent libraries first).

A lot of wheel spinning for this, thanks for the help.

Bootstrap collapse accordions with AngularJS

2 Answers2