AngularJS Simple Example

by anastsiacrs

HTML

<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
  <input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
  <p>{{isHidden}}  </p>
  <div ng-hide="model.isHidden"  >
     <div>Hello XXX</div>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
     <p> Some content will be here </p>
  </div>
</div>
</div>

CSS

.open-div{
  background-color:red;
  //height:260px;
}
.hidden-div{
  background-color:green;
  //height:60px;
}
.transformable {
    -webkit-transition: 3000ms linear;
    -moz-transition: 3000ms linear;
    -o-transition: 3000ms linear;
    -ms-transition: 3000ms linear;
    transition: 3000ms linear;
}

JavaScript

function XController($scope) {
    $scope.model={isHidden:true};
}