CODEWITHSUNDEEP
angularjstwitter-bootstrap
Andrew Karstaedt
Andrew Karstaedt

Reputation: 165

Bootstrap collapse accordions with AngularJS

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>

Upvotes: 0

Views: 2009

Answers (2)

Andrew Karstaedt
Andrew Karstaedt

Reputation: 165

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.

Upvotes: 1

Rick Wolff
Rick Wolff

Reputation: 777

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.

Upvotes: 1

Related Questions