1

I found this stackoverflow questions which looks to be the same problem I am having. That is the default behavior is for angular ui-bootstrap accordion to only open when you click on the panel title and not anywhere else on the panel.

ng-click on accordion panel header

The solutions presented seems to get out of sync when one time clicking on the panel and then clicking on the title. Sometimes you have to click twice to get it back in sync. I noticed this snippet on the documentation, To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS.

Can someone provide and example of using div tags instead of anchor elements?

Community
  • 1
  • 1
David Champion
  • 21
  • 3

1 Answers1

0

You have to customise the template for accordion-group to use clickable links otherwise it will trigger unexpected routing. You can modify the template as below: 

    <script id="uib/template/accordion/accordion-group.html" type="text/ng-template">

                <div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">

                    //this is previously <a role="tab"> - replace it with div
                    <div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
                         tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
                         uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
                    </div>

                </div>
                <div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
                     class="panel-collapse collapse" uib-collapse="!isOpen">
                    <div class="" ng-transclude></div>
                </div>
            </script>

You can put this template in your view where you are using accordion. This will override your default accordion-group template that comes from angular ui bootstrap tpls library.

Sateesh Kumar Alli
  • 288
  • 4
  • 17