Find closest element in AngularJS

Question

I want to slide toggle closest .contactDetails when a is clicked. Below is my code which does not work.

<ul>
    <li ng-repeat="detail in details">
        <div>
            <a show-contact>{{something}}</a>
            <div class="contactDetails">
                <ul>
                    <li ng-repeat="another ng-repeat">
                        <b>{{something}}</b>
                    </li>
                </ul>
            </div>
            <br>
        </div>
    </li>
</ul>

app.directive("showContact", function () {
        return {
            restrict: "A",
            link: function (scope, element) {
                element.click(function () {
                    element.find(".contactDetails").slideToggle();
                });
            }
        };
    });

I think AngularJS cannot find the closest .contactDetails somehow so slideToggle() cannot be performed.

I tried but element.closest(".contactDetails") did not work either. Thanks for your help.

Answer 1

Since the anchor tag does not contain the div you can't use find. And closest searches up the DOM, not down. Here is how I would do it (just showing the link: portion of the directive):

function(scope, element) {
    element.on("click", function() {
        element.next(".contactDetails").slideToggle();
    });
}

jsFiddle

Answer 2

I've created solution that you've asked for --> Run Snippet.

1) In this place I get the .contactDetails element

var contactDetails = element.next();

2) Then I call method

.toggleClass('hide')

on .contactDetails element, to show/hide element.

3) ".hide" class has display property set to none;

display: none;

4) Add event listener on element

 element.on('click', function () {
     //Code goes here               
 });

 var myapp = angular.module('myapp', []); myapp.directive("showContact", function () { return { restrict: "A", link: function (scope, element) { element.on('click', function () { var contactDetails = element.next(); contactDetails.toggleClass('hide'); }); } } }); myapp.controller('MainCtrl', ['$scope', function($scope) { this.something = 'This is something'; this.arr = ['mike', 'john', 'brian', 'joe']; }]); 

 body { font-family: Arial, Tahoma; } .hide { display:none; } a{ cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myapp"> <div ng-controller="MainCtrl as ctrl"> <ul> <li> <div> <a show-contact>Toggle class (CLICK ME)</a> <div class="contactDetails"> <ul> <li ng-repeat="name in ctrl.arr"> <b>{{name}}</b> </li> </ul> </div> <br> </div> </li> </ul> </div> </div> 

ere