html - href in accordion header not working

Question

I have an accordion with links in the header. It is in such a way that the accordion can be opened when clicked anywhere on the header. Because of this when clicked on the link, instead of going to that link (href) the accordion is opened.

Desired behaviour:

I want the accodion to be opened when clicked anywhere in the header except the link. (i.e when clicked on the link, the user must be redirected and accordion must not be opened)

<div>
    <accordion close-others="false">
        <accordion-group is-open="isopen" ng-repeat="ele in arr">
            <accordion-heading>
                <div>
                    <i class="pull-right glyphicon"
                       ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
                    <div style="width: 50%; float: left; padding-left: 6cm;">{{ele.a}}
                        <span >
                            <a href="https://www.fb.com">link</a>
                        </span>
                    </div>
                    <div style="text-align: center;">
                        <span>{{ele.b}}</span>
                    </div>
                </div>
            </accordion-heading>
       </accordion-group>
     </accordion>
  </div>

Plnkr

score 5 · Accepted Answer · answered Jan 06 '16 at 09:55

5

You need to call $event.stopPropagation(); in your ng-click -> ng-click="$event.stopPropagation(); fn1();"

answered Jan 06 '16 at 09:55

PrinceG

982
6
17

Sorry about that. fn1() is not used – Thiyagu Jan 06 '16 at 09:56
1

I was about to post the same response and fork your plunker. Use $event.stopPropagation(); – Eria Jan 06 '16 at 09:59
you still need to call `$event.stopPropagation()` to prevent any parent click handlers from being notified of the event – PrinceG Jan 06 '16 at 10:00

score 4 · Answer 2 · answered Jan 06 '16 at 09:59

4

The trick is to call Event.stopPropagation() inside ng-click handler of anchor:

<a href="https://www.fb.com" ng-click="$event.stopPropagation()">link</a>

Here's an updated plunker.

answered Jan 06 '16 at 09:59

miensol

39,733
7
116
112

score 1 · Answer 3 · answered Jan 06 '16 at 10:00

1

use

ng-click="$event.stopPropagation()"//this will not apply accordion click event on this link tag

instead of ng-click="fn1()"

This Might not work on plunk try it in your code.

answered Jan 06 '16 at 10:00

Minato

4,383
1
22
28

score 0 · Answer 4 · edited May 23 '17 at 11:45

When using accordion-heading, everything in it will be turned into an <a> tag.

Your code will be rendered in brower

<h4 class="panel-title">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
                <div class="ng-scope">
                    <i class="pull-right glyphicon glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
                    <div style="width: 50%; float: left; padding-left: 6cm;" class="ng-binding">1
                        <span>
                            <a href="https://www.fb.com">link</a>
                        </span>
                    </div>
                    <div style="text-align: center;">
                        <span class="ng-binding">2</span>
                    </div>
                </div>
            </a>
    </h4>

This is solution https://stackoverflow.com/a/14202514/3901308

html - href in accordion header not working

4 Answers4

This Might not work on plunk try it in your code.