In Directives on click button hide/show div

Question

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.

Fiddle Example :: JSFiddle link

HTML ::

 <div class="col-md-7" id="middle_part">Middle<br/>
      <my-dir 
        bgcolor="gray"
        myTitle="Anam" 
        amount="29000"
        myheight="100"
        width="400"
        mycolor="cyan"
        save="saveChanges('custom directive')">template
      </my-dir>
  </div>

Script ::

// 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: "&"    // event
    },
    template: 
      "<div><h2>  And This is Title <button ng-init='collapsed=true' ng-model='collapsed' ng-click='collapsed=!collapsed'>Save</button> " +
  "</h2><div  ng-show='collapsed' style='clear:both;'> This is dynamic content which i want to hide/show <br/><br/></div>" +
  "  {{myTitle}}+{{myheight}}:  </div>",
    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
    }
  }
});

How can I bind hide / show with animaion?

Answer 1

You can use ngAnimate module. First add a dependency:

var app = angular.module('plunker', ['ngAnimate']);

And after that setting up an animation is just a matter of writing CSS transitions/animations. For example:

.collapsible {
    -webkit-transition: all .6s linear;
    opacity: 1;
    background: #EFF;
    max-height: 150px;
}
.collapsible.ng-hide-add,
.collapsible.ng-hide-remove {
    display: block !important;
}
.collapsible.ng-hide-add-active,
.collapsible.ng-hide-remove-active {
    overflow: hidden;
}
.collapsible.ng-hide {
    opacity: 0;
    max-height: 0;
}

Demo: http://plnkr.co/edit/2YgEceZkBRjbnEVds945?p=preview