title: How can I toggle a drop down menu by using an AngularJS directive?
body: <p>I have the following code that attempts to create a dropdown menu using AngularJS, but it doesn't work:</p>
  
  <p>CSS:</p>
  
  <pre><code>.display_none {
    display:none;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;div dropdown&gt;
      &lt;div class="drop_down display_none"&gt;
        &lt;div id="elementWrap"&gt;
          // stuff
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS:</p>
  
  <pre><code>angular.module("app")
    .directive("dropdown",function(){
      return function(scope,element){
        element.bind("click",function(){
          if(element.find('.drop_down').hasClass('display_none'))
          {
            element.find('.drop_down').removeClass('display_none');
            element.find("#elementWrap").stop(true,true).delay(100).slideDown(350);
          }
          else
          {
            element.find("#elementWrap").stop(true,true).delay(100).slideUp(350,function(){
              element.find('.drop_down').addClass('display_none');
            });
          }
        });
      };
    });
  </code></pre>