title: In Directives on click button hide/show div
body: <p>I am trying to write a directive, where I am providing button so that when user will click on it some inner div will get hide . But I am not getting how can I do animation to hide /show clicked element directive as I am having many directives on my page.</p>
  
  <p><strong>Fiddle Example ::</strong>  <a href="http://jsfiddle.net/g68CM/1/" rel="nofollow">JSFiddle link</a></p>
  
  <p><strong>HTML ::</strong></p>
  
  <pre><code> &lt;div class="col-md-7" id="middle_part"&gt;Middle&lt;br/&gt;
        &lt;my-dir 
          bgcolor="gray"
          myTitle="Anam" 
          amount="29000"
          myheight="100"
          width="400"
          mycolor="cyan"
          save="saveChanges('custom directive')"&gt;template
        &lt;/my-dir&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Script ::</strong></p>
  
  <pre><code>// add a directive
  app.directive("myDir", function() {
    return {
      restrict: "E",
      scope: {
        myTitle: "@",   // by value
        myheight: "@",   // by value
        mywidth: "@",   // by value
        mycolor: "@",   // by value
        bgcolor: "@",   // by value
        amount: "=", // by reference
        save: "&amp;"    // event
      },
      template: 
        "&lt;div&gt;&lt;h2&gt;  And This is Title &lt;button ng-init='collapsed=true' ng-model='collapsed' ng-click='collapsed=!collapsed'&gt;Save&lt;/button&gt; " +
    "&lt;/h2&gt;&lt;div  ng-show='collapsed' style='clear:both;'&gt; This is dynamic content which i want to hide/show &lt;br/&gt;&lt;br/&gt;&lt;/div&gt;" +
    "  {{myTitle}}+{{myheight}}:  &lt;/div&gt;",
      replace: true,
      transclude: false,
      link: function (scope, element, attrs) {
  
          // show initial values: by-val members will be undefined
          console.log("background is " +attrs.bgcolor);
  
  
          // change element just to show we can
          element.css("background", attrs.bgcolor);
          element.css("color", attrs.mycolor);
          element.css("height", attrs.myheight);
          element.css("width", attrs.mywidth);
  
  
          // // log changes to the 'amount' variable
      }
    }
  });
  </code></pre>
  
  <p>How can I bind hide / show with animaion?</p>