Using Angular, how do I bind a click event to an element and on click, slide a sibling element down and up?

I'm not sure exactly on the behaviour that you're talking about, but I would encourage you to think in a slightly different way. Less jQuery, more angular.

That is, have your html something like this:

<div ng-click="visible = !visible"></div><div ng-show="visible">I am the sibling!</div>

You can then use the build in ng-animate to make the sibling slide - yearofmoo has an excellent overview of how $animate works.

This example is simple enough that you can put the display logic in the html, but I would otherwise encourage you to as a rule to put it into the controller, like this:

<div ng-click="toggleSibling()"></div><div ng-show="visible"></div>

Controller:

app.controller('SiblingExample', function($scope){  $scope.visible = false;  $scope.toggleSibling = function(){    $scope.visible = !$scope.visible;  }});

This kind of component is also a prime candidate for a directive, which would package it all up neatly.

app.directive('slideMySibling', [function(){  // Runs during compile  return {    // name: '',    // priority: 1,    // terminal: true,    // scope: {}, // {} = isolate, true = child, false/undefined = no change    // controller: function($scope, $element, $attrs, $transclude) {},    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment    // template: '',    // templateUrl: '',    // replace: true,    // transclude: true,    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),    link: function($scope, iElm, iAttrs, controller) {      iElm.bind("click", function(){         $(this).siblings('element').slideToggle();      })    }  };}]);

Usage would be something like

<div slide-my-sibling><button>Some thing</button></div><div>Some sibling</div>

Note all the "code" above is just for the sake of example and hasn't been actually tested.

http://plnkr.co/edit/qd2CCXR3mjWavfZ1RHgA

Here's a sample Plnkr though as mentioned in the comments this isn't an ideal setup since it still has the javascript making assumptions about the structure of the view so ideally you would do this with a few directives where one requires the other or by using events (see $emit, $broadcast, $on).

You could also have the directive create the children "programmatically" via JavaScript and circumvent the issue of not knowing what context the directive is being used in. There are a lot of potential ways to solve these issues though none of the issues will stop it from functionally working they are worth noting for the sake of re-usability, stability, testing, etc.

As per this link : https://docs.angularjs.org/api/ng/function/angular.element

AngularJs element in your code snippet represents JQuery DOM object for related element. If you want to use JQuery functions, you should use JQuery library before angular loads. For more detail, please go through above link.