title: Using Angular, how do I bind a click event to an element and on click, slide a sibling element down and up?
body: <p>I'm working with Angular and I'm having trouble doing something that I normally use jQuery for.</p>
  <p>I want to bind a click event to an element and on click, slide a sibling element down and up.</p>
  <p>This is what the jQuery would look like:</p>
  <pre><code>$('element').click(function() {
      $(this).siblings('element').slideToggle();
  });
  </code></pre>
  <p>Using Angular I have added an ng-click attribute with a function in my markup:</p>
  <pre><code>&lt;div ng-click=&quot;events.displaySibling()&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>And this is what my controller looks like:</p>
  <pre><code>app.controller('myController', ['$scope', function($scope) {
  
      $scope.events = {};
  
      $scope.events.displaySibling = function() {
          console.log('clicked');
      }
  
  }]);
  </code></pre>
  <p>So far this is working as expected but I don't know how to accomplish the slide. Any help is very much appreciated.</p>
  <h1>Update</h1>
  <p>I have replaced what I had with a directive.</p>
  <p>My markup now looks like this:</p>
  <pre><code>&lt;div class=&quot;wrapper padding myevent&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>I have removed what I had in my controller and have created a new directive.</p>
  <pre><code>app.directive('myevent', function() {
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
              element.bind('click', function($event) {
                  element.parent().children('ul').slideToggle();
              });
          }
      }
  });
  </code></pre>
  <p>However, I still can't get the slide toggle to work. I don't believe slideToggle() is supported by Angular. Any suggestions?</p>