0

I am using Angular and Angular-strap, the project is almost done but the client wants me to change the behavior of an accordion I am using, I will not use Angular-ui just in case that you want to mention that, I am using the regular Bootstrap Collapse plug in, as you know in order to have it working you need to set up some attributes, the problem I have now is that every single accordion has a unique id, but as I mentioned above I am generating just one accordion in my HTML with dynamic data which is in charge of generating more accordions according to the data that I am requesting from the DB, but all of the accordions has the same id, so the behavior of my accordion is weird, is opening and closing only the first panel, if I click the second panel, the first one closes automatically but the second keeps closed.

This is my html:

     <div class="panel-heading" id="headingOne" ng-click="addSportToLines(sport)">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
            data-target="#collapseOne"
            aria-expanded="true"
            aria-controls="collapseOne">
          {{::sport.name }}
        </a>
        <span class="pull-right badge">{{::sport.leagues.length }}</span>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
      aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="list-group leagues-margin">
          <a href="javascript:void(0)"
            ng-repeat="league in sport.leagues"
            ng-click="addLeagueToLines(league)">{{:: league.name}}
          </a>
        </div>
      </div>

and I am sure that the issue is on this line of code

<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"
   aria-expanded="true"
   aria-controls="collapseOne">
   {{::sport.name }}
</a>

or here: 

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
 aria-labelledby="headingOne">

or both... someone has an explanation ?

how can I do to provide different ids or what options do I have?

is something similar to this https://wordpress.stackexchange.com/questions/168420/getting-bootstrap-accordion-working-in-wordpress-loop-with-custom-post-type-col but with out the php code.

Community
  • 1
  • 1
Reacting
  • 5,543
  • 7
  • 35
  • 86
  • possible duplicate of [How to set repeated element id in AngularJS?](http://stackoverflow.com/questions/13718215/how-to-set-repeated-element-id-in-angularjs) – Dmitry B. Dec 23 '14 at 22:38
  • it is not, and actually and did not understand the answers on that question. @DmitryBeransky – Reacting Dec 23 '14 at 22:44
  • Have you tried to put the angular value as ID: data-target="#sport.name" – Snook Apr 23 '15 at 05:59

0 Answers0