CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Filth
Filth

Reputation: 3228

AngularJs "Collapse" | ng-repeat multiple accordions

I have two accordions using the same function called "collapse", this is part of bootstrap.

The issue I'm having is that on click both accordions open at the same time - this is not what I'm after.

What I think is going on is that both accordions are using the same function with no differentiator like an ID or get by element.

I'm unsure how to make it so that if a user clicks on the accordion, only the clicked accordion opens.

Here is my code: 

<div class="col-xs-12">
                  <div class="connections-wrap" ng-class="{'accordion-active': active}" ng-click="isCollapsed = !isCollapsed; toggleClass()" ng-init="isCollapsed = true">
                    <span class="connection-amount">{{billingAccount.totalSharers}}</span>
                    <span class="connection-type">Shared connections</span>
                    <div class="account-summary-icon-set-3 task-left connection-chevron"></div>
                  </div>
                  <!-- {{connection}} -->

                  <ul class="connections-list connection-list-first collapse" collapse="isCollapsed">
                    <li ng-repeat="sharedConnection in billingAccount.connections['sharers']">
                      <span class="connection-device">{{sharedConnection.nameTwo}}</span>
                      <span class="connection-number">{{sharedConnection.billingAccountNumber}}</span>
                    </li>
                  </ul>

                  <div class="connections-wrap">
                    <span class="connection-amount">{{billingAccount.totalOthers}}</span>
                    <span class="connection-type">Other connections</span>
                    <div class="account-summary-icon-set-3 task-left connection-chevron"></div>
                  </div>


                  <ul class="connections-list collapse" collapse="isCollapsed">
                    <li ng-repeat="otherConnection in billingAccount.connections['others']">
                      <span class="connection-device">{{otherConnection.nameTwo}}</span>
                      <span class="connection-number">{{otherConnection.billingAccountNumber}}</span>
                    </li>
                  </ul>
                </div> 
              </div>

Upvotes: 0

Views: 512

Answers (1)

link64
link64

Reputation: 1976

You are using the isCollapsed scope variable in multiple places. Use different variables to control the accordians independentaly

Upvotes: 2

Related Questions