I'm facing a simple issue and I can't figure out why I'm not getting the desired behavior. I am currently utilizing the Angular UI Bootstrap accordion, however, in the provided example, the only way to open the accordion is by clicking on the title. This is not the functionality I want. Take a look at this example, which demonstrates the behavior I am aiming for. In this example, you can open the panel by clicking anywhere within it, rather than just the title.
Below is the code snippet I am using:
<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>