Pełny rozmiar klikalnych paneli na Angular UI Accordion (?)

Question

Pytanie jest proste i nie wiem, dlaczego nie otrzymuję takiego zachowania, jakie chcę, jest to Angular UI Bootstrap accordion that I am using, ale jak widać na tym przykładzie jedyny sposób, aby otworzyć akordeon jest, jeśli klikniesz na tytuł, i to nie jest to, co chcę, teraz spójrz na this example, this is what I want, nie ma znaczenia, gdzie klikniesz na panelu, panel po prostu otworzy się, czy klikniesz na tytuł, czy nie .

i tutaj jest kod używam:

<accordion close-others="false"> 
     <accordion-group class="fx-fade-right fx-speed-300" 
     ng-repeat="sport in sports | filter:query" 
     ng-show="sport.leagues.length"> 
      <accordion-heading> 
      {{::sport.name}} 
      <span class="pull-right badge">{{::sport.leagues.length}}</span> 
      </accordion-heading> 
      <div class="list-group leagues-margin" 
      ng-click="addSportToLines(sport)"> 
      <a href="javascript:void(0);" class="list-group-item" 
       ng-repeat="league in sport.leagues" 
       ng-class="{active: league.active}" 
       ng-click="addLeagueToLines(league)">{{::league.name}} 
      </a> 
      <a href="javascript:void(0);" 
       class="list-group-item list-group-item-danger" 
       ng-hide="sport.leagues.length">No Leagues 
      </a> 
     </div> 
     </accordion-group> 

Answer 1

właściwie, tylko zorientowali, że obecnie, po prostu umieścić zawartość accordion-heading w div:

 <accordion-heading> 
     <div> 
      {{::sport.name}} 
      <span class="pull-right badge">{{::sport.leagues.length}}</span> 
     </div> 
     </accordion-heading>