CODEWITHSUNDEEP
htmlangularjsanchoraccordionangular-ui-bootstrap
Thiyagu
Thiyagu

Reputation: 17900

html - href in accordion header not working

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

Upvotes: 1

Views: 1955

Answers (4)

hunguyenv
hunguyenv

Reputation: 51

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

Upvotes: 0

Minato
Minato

Reputation: 4533

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.

Upvotes: 1

miensol
miensol

Reputation: 41638

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.

Upvotes: 4

PrinceG
PrinceG

Reputation: 982

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

Upvotes: 5

Related Questions