Reputation: 3531
I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like the default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneAtATime">
<accordion-group is-open="fdaClass1Open" ng-show="fdaRecallsClass1Count">
<accordion-heading>
<div class="panel-heading-blue">
<i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaClass1Open, 'fa-plus': !fdaClass1Open}" style="margin-right:10px"></i>
FDA Class 1 Recalls ({{fdaRecallsClass1Count}})
</div>
</accordion-heading>
{{fdaRecallsClass1Content}}
</accordion-group>
</accordion>
Is there some workaround for this?
Upvotes: 3
Views: 976
Reputation: 735
The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div
. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel
in order to expand the clickable area beyond the div
.
So say for instance the padding on your panel-heading
is 9px 15px
, you'd have the following css in your panel-heading-blue
class
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}
Upvotes: 2